In this blog, we will explore animated containers in Flutter. The animated version of the container gradually changes its values over a period of time.
As we all know, it is very important to make our application more interactive so that people will take more interest in our application.
The animated container will automatically animate between the old and new values of properties when they change using the provided curve and duration.
so it will going to be very interesting. We will implement it using an example. In this example, we will have a container with dynamic height.
You may also check our Flutter app development services page.
Example:-
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 the container is 40.0 and the container will be like as shown below.
|
1 2 3 4 5 6 7 |
var height = 40.0; Container( width: 60.0, height: height, color: Colors.red, ) |
And now suppose you have a Button and in the onPressed method, you can change the height of the Container and setState to rebuild the UI.
|
1 2 3 4 5 |
onPressed: (){ setState(() { height=320.0; }); } |
But sadly, We have the following output. there is no smooth transition when we change the height values. So this looks weird for a bar chart application.
Don’t worry we will make it smooth and also interactive. We need to replace our widget only.
Now replace your ordinary container with the Animated Container widget and provide a Duration property and then see the magic happen!.
One widget replacement and one extra line of code and voila! you are animating a container now.
Isn’t it amazing? It seems very beautiful. And Also using this we can show some animations to our Flutter application.
AnimatedContainer is a very useful widget.
Congratulations!!!! you have learned how to implement Animated Container in Flutter.
For more interesting blogs check out here – https://mobikul.com/blog/
Hope this blog helped you with a better understanding of the implementation of Animated Container in Flutter.
Thanks for reading.😇
References
https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html
Be the first to comment.