Animate with 🚀Stateless Animation

In my last article I announced the new version 2 of Simple Animations. Today I want to show, how easily you create animations with the 🚀Stateless Animation widgets.

Given the following scenario: We want to animate the number of likes inside a Text widget.

The animation we want to create.

Let’s begin with a stateless widget that returns a Text widget.

We start by wrapping our Text widget inside a PlayAnimation widget.

We put, everything we want to animate, inside the builder function. This function is called everytime our animates updates. It has three parameters. The last one value represents the current state of the animated value.

Next we need to specify what kind of data type the PlayAnimation<?> should animate. In our case we want to animate integer values. Then we can use the value to replace the static number “64736” in our Text widget.

Now we need to describe the animation. We can do this by specifying a tween. A tween describes the behavior of an animation over the time. In our case we want to animate integer values, starting from 0 to 64736 .

With supercharged we can just write: 0.tweenTo(64736) .

We apply this tween to the tween parameter. The PlayAnimation will now animate the number of likes within one second (default value).

That’s quite fast. That’s why we define our own duration by setting the duration parameter to 5.seconds. It will now animate the number for 5 seconds we the same speed.

To make it more interesting we can apply a non-linear animation curve. For example: easeIn will slow the animation down at the beginning and speed up at the end.

That looks much better.

The PlayAnimation can animate every data type we want. You easily create a double animation that changes the size of a container.

The stateless animation widgets are designed to be upgradable. You can simply rename PlayAnimation to LoopAnimation to change it’s behavior. Instead of stopping at the end, the animation will start over and over again.

Another very nice effect can be achieved with the MirrorAnimation . It’s also looping but instead of starting from the beginning, the animation will change it’s direction when reaching the beginning or the end.

If you like to read more: The CustomAnimation is the maximum upgrade to PlayAnimation and allows full control over the animation. You can find details in the readme file.

You can also watch the whole example as screen cast.

You can find Simple Animation at pub.dev. Examples shown here also make use of Supercharged. I hope you enjoy it.

Leave some 👏claps if you like my content.

Until next time
— Felix —