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 _width, _height, _borderRadius and _color.
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 AnimatedOpacity Widget.
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 AnimatedOpacity Widget:
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.