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.