🎭 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 value for a of an animated container widget:

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

Things get complex. Either we use an with three properties and wire everything up. Or we change the tween to something like a progress. Therefor we tween from to and use math to apply different values: and .

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:

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

Behind the scenes MultiTween computes all the math for you. MultiTween animates into a class classed . You can simply use it’s 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