I have dynamic list of glasses in a row and want to fill with water(of course animation!!) one after another and goes back to all the way to first glass(another reverse animation).

Created glasses like this and passed index to another class as below

        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          for (var i in glasses)
              index: glasses.indexOf(i),
              totalGlasses: glasses.length,

Below code is used in initState to start animation on one after another glass and its working!

_glassWaterListner() async {
    int _seconds = 0;
    for (int i = 0; i < widget.totalGlasses; i++) {
      if (i == widget.index) {
        await Future.delayed(Duration(seconds: _seconds), () {
      } else {}
      _seconds = _seconds + 5;

I am looking for better way to do these type of animations(as said in first line) and then reverse whole animation with different speed then start animation again !!