Hi there, so you're looking to create some beautiful animations in flutter but don't know how?
Let's learn that together.

So what are animations in Flutter ?

Flutter draws everything you see on top of a canvas. Yes, every pixel you see is painted by the Flutter engine. Flutter animations are drawn frame by frame and this simplicity is what gives Flutter its performance on all the platforms it support. When you start creating those beautiful animations you'll see that there are many ways to animate in flutter and with all that power comes great responsibility. One can be overwhelmed by the choices you've and get confused about what suits best to your need. But you don't have to worry as we'll discuss each option and when to use them. First, we'll go through the types of animations in flutter and then learn about each one of them.

Let's Get Started!!!

Types of ways to Animate in Flutter

1. Implicit Animations: Implicit Animations are the ones that rely on you for providing the value for the property that you want to animate for a widget. Flutter takes care of the transitions and lifecycle of the animation for you. Eazzy Pizzy right!

2. Explicit Animations: These Animations require you to specially control the overall lifecycle of the animation. That means you control how and when it starts? how it transits? and how it ends?

3. Animations with CustomPainter: Animations with CustomPainter are like drawing on a canvas, where you tell Flutter engine to draw something, provide necessary steps to draw it on the canvas, and control the drawing process.

4. Using External packages and third-party tools: If what you want to create seems hard to do with code or if your animation involves the use of SVG and vectors then you can use some external packages and third-party tools like Rive and Lottie to create them.

Implicit Animations

If your animation does only one thing that's it animates from one value to another and is a single widget then you should go with implicit animations. Implicit animations offer the easiest and fastest way to get started with animations in Flutter.

Let's see what an example of it may look like

class MyAnimatedFoo extends StatefulWidget {


  @override
  _MyAnimatedFooState createState() => _MyAnimatedFooState();
}

class _MyAnimatedFooState extends State<MyAnimatedFoo> {
  double height = 100;
  double width = 100;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            height = 200;
            width = 200;
          });
        },
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
      body: Center(
        child: AnimatedContainer(
          duration: Duration(seconds: 1),
          color: Colors.blue,
          height: height,
          width: width,
        ),
      ),
    );
  }
}

Hmmm, what's the AnimatedContainer there? Guess, what! In Flutter we are also provided with some pre-packaged implicit animations that we can use. They are called AnimatedFoo widgets. Where foo represents the property you want to animate. Whenever you set a new value they will get rebuild with the transition going from old value to new value. You can set the duration for animation and the curve for the transition to happen. There are also some other parameters that you can play with. Interesting, right! Like this we have

• AnimatedOpacity : You can use this to animate the object's opacity implicitly.
• AnimatedPadding: Nice way to animate the padding around any widget to give it a smooth entrance effect if mixed with opacity.
• AnimatedList: To animate insertion and removing of items from a list.
• AnimatedIcon: This is a pretty handy widget if you're looking for some quick beautiful button animations to add like the hamburger icon changing to cross when clicked.

  Working with some of this AnimatedFoo like AnimatedIcon requires an understanding of using AnimationControllers with tweens which we'll talk about in the Explicit Animations.

Now you understood about some prebuild Implicit Animations, that's great! They are a nice way to start but what if you don't find any AnimatedFoo for the property you want to animate?

TweenAnimationBuilder

For this, we have TweenAnimationBuilder which is a way to build your custom implicit animations with more control over them.

Let's have a look at them in the following example

class MyCustomImplicitAnimation extends StatelessWidget {
  static final changingdimensions = Tween<double>(begin: 100.0, end: 200.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TweenAnimationBuilder(
        tween: changingdimensions,
        duration: Duration(seconds: 1),
        builder: (context, value, _) {
          return Center(
            child: Container(
              color: Colors.blue,
              height: value,
              width: value,
            ),
          );
        },
      ),
    );
  }
}

Here we pass a tween object to the TweenanimationBuilder that holds the start and end values of the animation. What are those tween objects here? Tween object represents the set of values for a property that you want to animate. Whenever the tween value changes the builder is called and the widget underneath it is rebuilt with a new value. When using TweenAnimationBuilder you don't have control over when the animations start, it starts as soon as the widget is activated. And one more interesting thing is that we don't need a stateful widget for this. All that is managed by the TweenAnimationBuilder itself.

That's it. Those are most of the things you need to know when getting started with Implicit Animation in Flutter. Next up we'll dive into the Explicit Animations in Flutter.

Thanx for Reading

If you found it useful and interesting to read then follow up for more interesting article coming your way and let's connect on Twitter