If you want to make your Flutter application fancier you’re in the right place. With this tutorial in 2 parts you will learn how to add animations to your app.
In this first part we will use the awesome Widgets available in the framework that lets you show awesome animations without having to customize every single aspect of the animations.
The final result will be like the video below:
Let’s start creating a
Container at the center of the screen and the buttons to change its properties.
We’ve defined 4 properties
Let’s implement the functions that change those values:
We use the _random object to generate random values for our properties, so when you press the button the Container changes. So, for example, if you press the
Color button the container will change its color with a random one.
But, wait isn’t this tutorial about animations, where are the animations?
To animate the changes to our container we just need to use an
AnimatedContainer instead of a simple
Container , specifying the duration of the animation.
Now let’s add an opacity animation with the
Add a new variable to the state called
_opacity with the initial value of 1 and the button to change it.
Let’s use this value with an
Congratulations, you’ve added the first animations to your app, check out the second part of this tutorial to learn how to make more complex and beautiful animations.