This is the second part of a series of tutorials to build animations with Flutter. In this pat we will learn how to use the
AnimationControllers, to build more precise animations.
The final result will be like this video, you can find the asset of the image that we’ve used here.
The first thing that we need to do is to create our Ghost Widget that we will use to build the animation.
Then, let’s create a Stateful Widget that will represent our Scaffold, with the Ghost in the center of the screen.
If you analyze the final result that we want to obtain you can see that we have 2 animations.
We need to change the position and the scale of our ghost, together.
So we will need 2 animations and one animation controller to control them.
Let’s define and initialize them in our state.
As you can see the
AnimationController object needs a async property with is an object that conforms to
TickerProvider, we can use our state object declaring the
We’ve defined the position animation that goes from 0 to 1 in the first 35% part of the duration of the whole animation.
Then we’ve defined the scale animation that goes from 0 to 1.25 in the first 35% part of the animation (using the weight parameter) and then it scales back from 1.25 to 1.0 in the rest 65%.
Note that we need to dispose the animation controller in the dispose method of our widget.
Now let’s use those animations in our build method, using an
AnimatedBuilder takes the animation object as a parameter (we’re using the animation controller) and a builder that will be called when the values of the animations are updated.
It has also a
child parameter, that will be passed in the builder function, to prevent unnecessary builds, we’re using the
Ghost widget here.
We’re done! 🎉
We have our animation that starts when the Widget is created.
The only little piece that’s missing is to connect the floating action button to restart the animation. There’s nothing as easy as this: you just need to call the reset function of the animation controller and then the forward function to start the animation.