title: how to display animations one after the other in flutter
body: <p>I have mapped an array to a class and I am displaying the animation accordingly but the animation works for the entire thing at once. I want to have a delay between the subsequent animations. </p>
  
  <p><a href="https://i.stack.imgur.com/ugbmz.png" rel="nofollow noreferrer">The screenshot of the game is here. The stars should appear with animation one after the other</a>  The code that i am using is :</p>
  
  <pre><code>for (var i = 0; i &lt; 4; i++) {
    myScore &gt; (10*i) ? stars.add("true") : stars.add("false");      
  }
  
  Widget _buildItem(int index, String text) {
  return new MyButton(
      key: new ValueKey&lt;int&gt;(index),
      text: text,
      keys: keys++,
      onPress: () {
  
      }
      );
  </code></pre>
  
  <p>}</p>
  
  <pre><code>    class MyButton extends StatefulWidget {
  
        MyButton(
            {Key key,
            this.text,
            this.keys,
            this.onPress})
            : super(key: key);
        final String text;
        final VoidCallback onPress;
        int keys;
        @override
        _MyButtonState createState() =&gt; new _MyButtonState();
      }
  
  class _MyButtonState extends State&lt;MyButton&gt; with TickerProviderStateMixin {
    AnimationController controller;
    Animation&lt;double&gt; animation;
    String _displayText;
  
    initState() {
      super.initState();
      print("_MyButtonState.initState: ${widget.text}");
      _displayText = widget.text;
  
      controller = new AnimationController(
          duration: new Duration(milliseconds: 600), vsync: this);
  
      animation = new CurvedAnimation(parent: controller, curve: Curves.easeIn)
        ..addStatusListener((state) {
  //        print("$state:${animation.value}");
          if (state == AnimationStatus.dismissed) {
            print('dismissed');
            if (widget.text != null) {
              setState(() =&gt; _displayText = widget.text);
              controller.forward();
            }
          }
        });
    }
  
     @override
      void didUpdateWidget(MyButton oldWidget) {
        super.didUpdateWidget(oldWidget);
       // sleep(const Duration(microseconds: 10)); //I tried adding a delay here but instead it delays the entire thing.
      }
  
    @override
    void dispose() {
      controller.dispose();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      Size media = MediaQuery.of(context).size;
      double ht = media.height;
      double wd = media.width;
      widget.keys++;
      print("_MyButtonState.build");    
      return new Shake(
        animation: animation,
        child: new GestureDetector(
  
       child: new Container(
  
       child: new FlatButton(
           onPressed: () =&gt; widget.onPress(),
           color: Colors.transparent,
  
           child: new Icon(
          _displayText == "true" ? Icons.star : Icons.star_border,
          key: new Key("${widget.keys}"),
          size: ht &gt; wd ? ht * 0.05 : wd * 0.05,
          color: Colors.black,
           )
  
      ),)
      ) );
    }
  }
  </code></pre>