🎭 Animate multiple properties in Flutter

Today I want to cover another aspect of the new Simple Animations 2. MultiTween enables your easily define a tween that animes multiple properties at once or create chained animations.

The animation we want to create.

In a regular tween you usally describe the animation behavior of a single property. For example a double value for awidth of an animated container widget:

var tween = Tween(begin: 0.0, end: 100.0);

But what if we also want to animate it’s height or color?

Things get complex. Either we use an AnimationController with three Animation<?> properties and wire everything up. Or we change the tween to something like a progress. Therefor we tween from 0.0 to 1.0 and use math to apply different values: width = progress * 100.0; and height = progress * 200.0 .

But all of this isn’t cool at all. This is a job for MultiTween. It’s a type-safe way to define complex animations.

First we define an enum with all properties: enum _AniProps = { width, height, color }

Next we create a new MultiTween and use it’s add method to define the behavior of all properties:

Behind the scenes MultiTween computes all the math for you. MultiTween animates into a class classed MultiTweenValues . You can simply use it’s get method to access the animated values.

Here is a complete example:

… that looks like this:

You can also watch a step-by-step example as a 3min screencast:

MultiTween is also perfect for creating chained animation, like this:

Source Code

You can start using MuliTween by adding Simple Animations to your project. There is a complete documentation about using MultiTween.

Happy Animating!
— Felix —

Software Developer, http://felix-blaschke.de