Flutter Animation for Beginners — AnimatedContainer

AnimatedContainer

Animation is really essential for better styling and making the UI more lively. Well executed animation can make an app more attractive and improve user experience.

In Flutter, animations come in two flavors: implicit and explicit animations. Today we will talk about a built-in implicit animation widget AnimatedContainer. AnimatedContainer widget is very simple yet very powerful widget provided by the flutter team, you can make cool animations with it very easily.

Animated buttons

In the above image you can see smooth transition between two buttons in different steps and the circular step counter moving to different positions. We will try to implement this using AnimatedContainer.

At first let’s design these two buttons “Next” and “Go Back”

Now Let’s make a StatefulWidget and show these two buttons together

Which will make something like this.

Go Back & Next Button

There will be 3 steps, in first step it will only show Next button, in second step it will show both Go Back & Next button. And in third step it will only show Go Back button. To achieve this we will change the width of these buttons with step change. getWidthBlueButton() & getWidthGreyButton() will determine the width of two button in different steps.

Let’s also show the step count on top of the button change it’s position with different steps.

So now it becomes something like this without any animation.

Non Animated Button Group

Now how can we make these transition between buttons more smoother? Actually it’s really easy. We just have to replace the Container with AnimatedContainer and give a duration to that. It’s as simple as it is. We will also give a curve here. There are numerous Curves in flutter for animating elements.

We will just change the Container of two buttons and Step circle and it’s done!

Here is the full code below

Thank you for reading this, hope you liked it and will start making awesome animations in flutter.