title: How to apply translate and rotate animation in flutter to create a "cards being flung around" effect
body: <p>I am creating a n UNO game app and this is the intro screen part. I need a very custom kind of animation and I dont have much knowledge in flutter custom animations. </p>
  
  <p>Here is a little preview</p>
  
  <p><a href="https://i.stack.imgur.com/ebzwe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ebzwe.png" alt="enter image description here"></a></p>
  
  <p>Now I want to create a "cards flying around" animation. It is basically cards (which are containers with svg assets) being translated and rotated AT THE SAME TIME across the screen to create a flying card effect. This animation will be repeated over and over.</p>
  
  <p>I have managed to make a very basic version which just translates , doesnt rotate and doesnt look all that pretty. Here is the code.</p>
  
  <p>INTROSCREEN</p>
  
  <pre><code>class IntroScreen extends StatefulWidget {
    @override
    _IntroScreenState createState() =&gt; _IntroScreenState();
  }
  
  class _IntroScreenState extends State&lt;IntroScreen&gt;
      with SingleTickerProviderStateMixin {
    AnimationController _controller;
    Animation _animation;
  
    @override
    void initState() {
      _controller =
          AnimationController(vsync: this, duration: Duration(seconds: 4));
      _animation = RainbowColorTween([
        CardColors.COLOR1,
        CardColors.COLOR2,
        CardColors.COLOR3,
        CardColors.COLOR4,
        CardColors.COLOR1,
      ]).chain(CurveTween(curve: Curves.easeInOut)).animate(_controller);
      _controller.addListener(() {
        setState(() {});
      });
      _controller.repeat();
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      return SafeArea(
        child: Scaffold(
          body: Container(
            color: _animation.value,
            child: ChangeNotifierProvider&lt;_DataModel&gt;(
              create: (context) =&gt; _DataModel(),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: &lt;Widget&gt;[
                  SizedBox(
                    height: 100,
                  ),
                  _Logo(),
                  SizedBox(
                    height: 50,
                  ),
                  _TextField(),
                  _SelectCards(),
                  _Play(),
                  Expanded(child: FlyingCards(MediaQuery.of(context).size.width)),
                ],
              ),
            ),
          ),
        ),
      );
    }
  }
  
  class _Logo extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return SizedBox(
        height: 200,
        child: FlareActor(
          "assets/intro_anim.flr",
          alignment: Alignment.center,
          fit: BoxFit.contain,
          animation: 'intro',
        ),
      );
    }
  }
  </code></pre>
  
  <p>Here is what I managed to build</p>
  
  <pre><code>class FlyingCards extends StatefulWidget {
    final double width;
    FlyingCards(this.width);
    @override
    _FlyingCardsState createState() =&gt; _FlyingCardsState();
  }
  
  class _FlyingCardsState extends State&lt;FlyingCards&gt;
      with SingleTickerProviderStateMixin {
    AnimationController _controller;
    Animation _animation;
  
    @override
    void initState() {
      _controller =
          AnimationController(vsync: this, duration: Duration(seconds: 2));
  
      _animation = Tween&lt;double&gt;(begin: 0, end: widget.width)
          .chain(CurveTween(curve: Curves.ease))
          .animate(_controller)
            ..addListener(() {
              setState(() {});
            })
            ..addStatusListener((status) {
              if (status == AnimationStatus.dismissed)
                _controller.forward();
              else if (status == AnimationStatus.completed) _controller.reverse();
            });
  
      _controller.forward();
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      return Container(
        color: Colors.white,
        child: Transform.translate(
          offset: Offset(_animation.value, 0),
          child: Container(
            height: 50,
            width: 50,
            child: SvgPicture.asset('assets/plus4.svg'),
            decoration: BoxDecoration(borderRadius: BorderRadius.circular(20)),
          ),
        ),
      );
    }
  }
  </code></pre>
  
  <p>In the above picture , the card is actually translating across the device's width back and forth.</p>
  
  <p>I feel what I have created is the cumbersome way of doing animations. If anyone still didnt get what I mean by flying cards animation, the same kind of effect appears on angry birds game screen, it's just bird and pigs flying around. I need the same but with my cards.</p>
  
  <p>Please check out <a href="https://youtu.be/9z_YNlRlWfA" rel="nofollow noreferrer">this video</a> and jump to 0:22 for a small reference of what UI I am hoping for.</p>
  
  <p>I tried to reduce the complexity as much as I could. Thanks for your time!</p>