We all know that Container
class provides a convenient way to create a widget with specific properties: width, height, background color, padding, borders, and more.
Simple animations often involves changing these properties over time. For example, you may want to animate the background color from blue to orange to indicate that an item has been selected by the user.
To animate these properties in Flutter App, Flutter provides the AnimatedContainer
widget. Just Like the Container
Widget, AnimatedContainer
widget allows you to define the properties like , width, height, background colors, etc. When theAnimatedContainer
is rebuilt with new properties, then it automatically animates between the old values and new values. In Flutter, such types of animations are known as “implicit animations.”
This describes how to use an AnimatedContainer
to animate the size, background color, and border radius when the user taps a button.
What is Implicit Animation In Flutter?
In Flutter App When theAnimatedContainer
is rebuilt using new properties, then it automatically animates between the old values and new values. In Flutter, such types of animations are known as “implicit animations.”
Creating the Animating The Properties Of A Container in Flutter:
- Create a StatefulWidget with default properties
- Build an
AnimatedContainer
using the properties - Start the animation by rebuilding with new properties
Creating a StatefulWidget with default properties:
Now , create a StatefulWidget
and a State
classes. In this custom State class define the properties you need to change. In this example, we are going to includes the width, height, color, and border radius. In addition, you can also define the default value of each property.
These properties must come under a custom State
class so they can be updated when the user taps OR click a button.