Flutter Animated Series : Animated Containers
I always wanted to work with neat or crazy animations. I have worked with Android for a couple of years and I was starting to lose my love for animations, because trying to develop them in Android was a huge investment of my time.
And I have fallen in love again.
To celebrate this newfound love, I am starting an Animated Series for Flutter.
YES It’s a SERIES!
I am going to cover everything about animation in Flutter from implicit animations to explicit animations and even Flare! This is the first one in the series.
Animated Containers are implicit animated widgets.
Wait a second. What are implicit animated widgets again?
So usually to achieve an animation in Flutter, we have to define the
AnimationController objects to manage the animations. There are other complex additions like
TickerProviderMixin. You have to manually start the animation, end the animation and various other complexities.
But good news for us, implicit animated widgets have all these logic under the hood, and we don’t have to worry about a thing. Give a
duration, define the
end values and let your widgets animaaate!
Example 1 — Bar Charts
Imagine you have to build an application with bar graphs. So there can be a container with increasing or decreasing height depending on the graph values.
Let’s imagine the initial height of your
var height = 40.0;
And then your
Container will be like —
And now suppose you have a
Button and in the
onPressed method, you can change the height of the
setState() to rebuild the UI.
height = 320.0;
But sadly, we have this following output.
There is no smooth transition when we change the height values. So this looks weird for a bar chart application.
We want the bar to gradually increase with time.
Let’s see if we can achieve our desired effect with
Let’s see some magic!
Replace your ordinary
AnimatedContainer and provide a
Duration property and see the magic happen!
duration: Duration(seconds: 5),
One widget replacement and one extra line of code, and voila! You are animating a Container now!
I showed this example during my DevFest BBSR and DevFest Kolkata talks, and in minutes, Flutter was sold to my audience.
Example 2 — Take Flight
Obviously you can animate the usual
Container properties like
width . But you can also animate a
Container’s child, like using the
alignment property to align a
Container’s child is an
Alignment property affects the child of a
The initial alignment is
On clicking the button, we change the
And the airplane flies right to the center of the screen!
You can find the entire working code here —
Example 3 — Playing with lots of colors!
Not one color, but many colors. We are going to animate the
gradient property of the
Here I defined just two colors and their initial
alignment and changed both the properties on
Code here —
What else do we have in the Animated Series ?
- AnimatedCrossFade (Coming soon)
- And many more…
Read the Spanish translation by CarlosMillan here —
Serie Flutter Animated: Containers Animados
Fuente original: https://medium.com/flutter-community/flutter-animated-series-animated-containers-52a5d52c0ad3
Read the Portuguese translation by Pedro Massango here —
Série animada do Flutter: Containers Animados
Mais um artigo da série de artigos sobre Flutter em Português. Desta vez temos um artigo originalmente escrito por…
My articles are free, but you know you can press the clap👏 button 50 times? The higher you go, the more it motivates me to write more stuff for you guys!
Feeling super generous? Buy me a cupcake. 😋
Hello World, I am Pooja Bhaumik. A creative developer and a logical designer. You can find me on Linkedin or stalk me on GitHub or maybe follow me on Twitter? If that’s too social for you, just drop a mail to firstname.lastname@example.org if you wish to talk tech with me.
Have a nice fluttery day!