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
AnimatedContainer widget allows you to define the properties like , width, height, background colors, etc. When the
AnimatedContainer 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 the
AnimatedContainer 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
AnimatedContainerusing 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.