title: Starting An Animation When A Button Is Pressed - Flutter
body: <p>I'm new to flutter and I'm trying to create a UI in which there is a card deck and a displayed card. Whenever the user presses on the card deck I want a new Card to show up (using an animation of flipping and moving with Positioned widget).</p>
  
  <p>The thing is, I can't understand how to make the animation appear every time the widget is created. </p>
  
  <p>I tried to make the animation go on the init state of the widget I created, but that doesn't seem to work.</p>
  
  <p>This is the app widget tree:</p>
  
  <pre><code>class _DeckState extends State&lt;Deck&gt; with TickerProviderStateMixin {
    List&lt;MyCard&gt; _cards= &lt;MyCard&gt;[];
  
    @override
    void initState() {
      super.initState();
      _cards.insert(0, MyCard());
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("NLP Deck"),
        ),
        body: Stack(
          alignment: Alignment.center,
          children: &lt;Widget&gt;[
            Container(),
            _cards[0],
            Positioned(
              top: 40.0,
              child: GestureDetector(
                onTap: PressedDeck,
                child: Container(
                  width: 100.0,
                  height: 128.0,
                  decoration: BoxDecoration(color: Colors.brown),
                ),
              ),
            ),
          ],
        ),
      );
    }
  
    void PressedDeck() {
      setState(() {
        _cards.insert(0, new MyCard());
      });
    }
  }
  </code></pre>
  
  <p>And this is the Card widget I created (used Containers to represent the card and the card deck):</p>
  
  <pre><code>class _CardState extends State&lt;MyCard&gt; with TickerProviderStateMixin {
    AnimationController animController;
    Animation flipAnimation;
    Animation positionAnimation;
  
    @override
    void initState() {
      super.initState();
      animController = new AnimationController(
          vsync: this, duration: Duration(milliseconds: 1000));
      flipAnimation = Tween&lt;double&gt;(begin: 1.0, end: 0).animate(animController);
      positionAnimation =
          Tween&lt;double&gt;(begin: 40.0, end: 240.0).animate(animController);
  
      animController.forward();
    }
  
    @override
    Widget build(BuildContext context) {
      return PositionTransition(
        position: positionAnimation,
        flip: flipAnimation,
      );
    }
  
    @override
    void dispose() {
      animController.dispose();
      super.dispose();
    }
  }
  
  class PositionTransition extends AnimatedWidget {
    PositionTransition({
      @required Animation&lt;double&gt; position,
      @required this.flip,
    }) : super(listenable: position);
  
    final Animation&lt;double&gt; flip;
  
    @override
    Widget build(BuildContext context) {
      final position = super.listenable as Animation&lt;double&gt;;
      return Positioned(
        top: position.value,
        child: Transform(
          alignment: FractionalOffset.center,
          transform: Matrix4.rotationX(math.pi * flip.value),
          child: flip.value &gt;= 0.5
              ? Container(
                  width: 100,
                  height: 128,
                  decoration: BoxDecoration(color: Colors.deepOrange),
                )
              : Container(
                  width: 100,
                  height: 128,
                  decoration: BoxDecoration(color: Colors.amber),
                ),
        ),
      );
    }
  }
  </code></pre>
  
  <p>Thanks!</p>