ANIMATED CONTAINER IN FLUTTER

Save

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.

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.

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

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

css.php

We've bought a Shopware Extension which is a hybrid App, which we can now offer in the Google Play Store and the IOS App Store. I'am still impressed how fast and how sharp the support team leads us through every process of the App-Store clarification. Very fast and useful response.

Markus Walter

Markus Walter

Founder, Das Apartment Living

Talk to Sales

Global

Live Chat
Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home