How I created my first Flutter Animation

No matter how good the UI of an app or website is, you can always make it better by adding some really cool animations and transitions, and that is why I started learning about Flutter Animations and that’s what this blog is about, how I learned the basics of animation in Flutter.

Creating an Anim… Well, Step - 1!

First we need to create an AnimationController.

What is an AnimationController, you ask? It is a special Animation object that generates a value whenever the device is ready for a new frame. By default, it produces numbers ranging from 0.0 to 1.0 during a given duration.
It does have several methods, about which we’ll be talking about as we go further. But first things first, let’s declare and initialise our AnimationController.

class AnimationExample extends StatefulWidget {
  @override 
  _AnimationExample createState() => _AnimationExampleState(); 
}

class _AnimationExampleState extends State<AnimationExample> with SingleTickerProviderStateMixin {

  AnimationController _animationController; 
  Animation<double> _slidingAnimation; 

  @override 
  void initState() {
    super.initState(); 
    _animationController = AnimationController(
    duration: Duration(milliseconds: 200), vsync: this);
  } 
}

Note :- while creating an AnimationController you might have noticed that you have to pass in a vsync argument, for that first add a mixin named SingleTickerProviderStateMixin and then pass in reference of that class as vsync argument.
If you want to learn more about vsync and TickerProvider refer to https://dash-overflow.net/articles/why_vsync/

What to do next ?

Now let’s go ahead and create the animation!
As we had discussed earlier, by default, the animationController produces numbers ranging from 0.0 to 1.0, but we don’t always need fractional values, do we ? One way around that problem is to multiply the result by a suitable number, but it’s not a very good idea. So, flutter has this TweenSequence which can be used to set a list of custom tween sequences, now you can get sequences of tweens which produce double, int, and other values.

@override
void initState() {
  .
  .
  _slidingAnimation = TweenSequence(
    <TweenSequenceItem<double>>[
      TweenSequence<double>(
        tween: Tween<double>(begin: 0, end: 100), 
        weight: 100, 
      ),
    ]
  ).animate(_animationController);
  .
  .
}

No, we’re not done yet. We’ve created AnimationController and an Animation but the animation won’t start playing on its own. To set it off we use the forward() method of AnimationController to set it off, in forward direction or the reverse() to play it backwards.

And yes one more thing, whichever widget you want to animate, you must wrap it in an AnimationBuilder widget.

@override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
        builder: (BuildContext context, _) {
          return Padding(
            padding: EdgeInsets.only(left: _slidingAnimation.value), 
            child: IconButton (
              icon: Icon(Icons.someRandomIcon), 
              onPressed: () {
              _animationController.forward(); 
              }
            )
         );
       }
    );
  }

And that is how I made my first animation! It is a very basic animation so, I tried making something a bit more interesting than an icon sliding across the screen, and…

If you have some suggestions, feel free to share.
Thank you!