Animate with 🚀Stateless Animation
Given the following scenario: We want to animate the number of likes inside a Text widget.
Let’s begin with a stateless widget that returns a Text widget.
We start by wrapping our Text widget inside a
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
With supercharged we can just write:
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.
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
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.