Just start animating in Flutter

⚠ This article covers a previous version of Simple Animation. The basics stay the same but class names have changed.

You love Flutter? Then you already managed to create beautiful UIs in record time. Have you tried animation? Animations are cool, but you need to setup all the StatefulWidget, InitState, OnDispose, AnimationController, Tween-stuff for each animation.

Not anymore. I’ll show you how to create custom animations in record time.

Blue square.

Look at this blue square. It’s a Container with a width, height and a color. Let us double it’s width. You just need to wrap it into a ControlledAnimation:

return ControlledAnimation(
  duration: Duration(seconds: 1),
  tween: Tween(begin: 100.0, end: 200.0),
  builder: (context, width) {
    return Container(width: width, height: 100, color: Colors.blue);
  },
);

Blue square animates to rectangle.

Wow, that was pretty easy, ain’t? How did you’ve never heard of the ControlledAnimation widget? It’s coming from my Flutter package simple_animations.

You just need to specify…

• a duration (length of the animation)
• a tween (what to do while animating)
• a builder (how does your movie scene look like) where the animated variable is accessible as a second parameter. In this example it’s width.

… and no StatefulWidget, no AnimationController, no vsync-Mixin.

I guess you are pretty impressed right now? Not? Let’s move on.

You can simply control the animation with the playback property:

Animation using MIRROR playback

return ControlledAnimation(
  playback: Playback.MIRROR,
  duration: Duration(seconds: 1),
  tween: Tween(begin: 100.0, end: 200.0),
  builder: (context, width) {
    return Container(width: width, height: 100, color: Colors.blue);
  },
);

There are several Playback-styles from forward, reverse to loop and mirror. You can also change the playback property anytime. (For example setting forward to backward and your animation will right turn around in the middle of the animation.)

Add easing with ease. Just set the curve property…

Animation using Curve.easeInOutSine

… or stagger independent animations by specifying a delay. The animation will execute not before the delay duration passed.

Great! But when we are talking about staggering. I also have tool for you - coming with simple_animations: Say hello to MultiTrackTween!

It behaves like a tween, but it supports multiple properties to animate independently. Each property is a Track that can itself have a staggered animation.

It’s time to pimp our square animation:

Pimped Square: animates five different properties.

final tween = MultiTrackTween([
  Track("width")
      .add(Duration(seconds: 1), Tween(begin: 100.0, end: 200.0))
      .add(Duration(seconds: 1), ConstantTween(200.0)),
  Track("height")
      .add(Duration(seconds: 1), ConstantTween(100.0))
      .add(Duration(seconds: 1), Tween(begin: 100.0, end: 300.0)),
  Track("color")
      .add(Duration(seconds: 2), 
                 ColorTween(begin: Colors.blue, end: Colors.green)),
  Track("rotation")
      .add(Duration(seconds: 3), Tween(begin: 0.0, end: pi),
           curve: Curves.easeIn),
  Track("radius")
      .add(Duration(milliseconds: 500), ConstantTween(0.0))
      .add(Duration(milliseconds: 1500), 
                                    Tween(begin: 0.0, end: 50.0))
]);

return ControlledAnimation(
  playback: Playback.MIRROR,
  duration: tween.duration,
  tween: tween,
  curve: Curves.easeInOutSine,
  builder: (context, animation) {
    return Transform.rotate(
      angle: animation["rotation"],
      child: Container(
        width: animation["width"],
        height: animation["height"],
        child: Center(
          child: Text("simple\nanimations"),
        ),
        decoration: BoxDecoration(
            color: animation["color"],
            borderRadius:  
          borderRadius.all(Radius.circular(animation["radius"]))),
      ),
    );
  },
);

Our pimped animation consists of border-radius-, color-, size- and rotation-transitions. Perfectly arranged. Readable. Less verbose. No stateful pain.

It’s that simple. That’s why I named it simple_animations. And it’s free!

The goal for this project is to simplify the animation creation process for Flutter developers. I’ve invested a lot in documentation and examples.

Now try it out and create beautiful animations…

https://pub.dartlang.org/packages/simple_animations

… and dive into the official documentation or explore the example app.

I hope you like it. Feel free to blog about it or create video tutorials! I’m looking forward to see, what you are creating with it.

Your Flutter junkie,
— Felix —

Read follow up article:

Fade in your UIs in Flutter