ANIMATED CONTAINER IN FLUTTER

In this blog we will explore about animated container in flutter.Animated version of container that gradually changes its values over a period of time.

As we all know that ,it is very important 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 a 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 container will be like as shown below.

    var height = 40.0;
            
            Container(
              width: 60.0,
              height: height,
              color: Colors.red,
            )

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.

   onPressed: (){
              setState(() {
                height=320.0;
              });
            }

onPressed: (){

setState(() {

height=320.0;

});

}

But sadly,We have this following output.there is no smooth transition when we change the height values.So this looks wierd 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 AnimatedContainer 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 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

Vandana Sharma 27 April 2023

. . .

ANIMATED CONTAINER IN FLUTTER

Example:-

References

Leave a Comment Cancel Reply

Message Sent!