⚠ 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)

(length of the animation) a tween (what to do while animating)

(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.