Flutter Widget Guide — AnimatedContainer Widget in 5 mins or less.

Annsh Singh
Apr 15 · 3 min read

This is Part 4 in the series where I’ll cover all the Flutter widgets that are in this YouTube playlist. I have created my own widget guide which I believe will help people who are new in this space. Please have a look at this GitHub project to explore all the amazing widgets.

Click here to the App available on Google Play Store. 📱

My main motive behind this series is to keep things to the point. Your time is precious, let’s not waste it and get started.

Having animations in your app can enhance the overall experience of your application. Creating an animation has always been a hassle in android and I always looked for libraries to achieve the desired result. Even simple animations were sometimes complicated to work around with and that ruined the overall experience for me as a developer.

Want your widget to animate as it changes its color? Want your widget to change its position or its dimensions with a smooth animation? Flutter has you covered with a very simple solution.

AnimatedContainer Widget

1 | What?

There are two types of animations in the Flutter 🌍. We have Explicit Animations, ones that you create on your own and the other kind is Implicit Animations (e.g. AnimatedContainer) that does the job for you. Wrap your widget with the AnimatedContainer and you are good to go. This widget helps you animate the changes in properties like background color, border, shape, size, etc. You can control the duration of the animation. You can also set different effects, basically the way your animation works, with the curve parameter.

For this, I have replicated the animation shown on this link.

2 | Wondering how it works?

Have a look at the Code snippet below.

Below is the visual representation of the code above.

3 | Explanation

In the above example, we have three AnimatedContainers. All three experience an animated change in one of their properties — the first in the color, the second in the alignment and the third in its dimensions. The length of all 3 animations is the same i.e. 2 seconds. The curve property is set to fast out slow in to give a smooth animation effect. The change in properties is controlled by the FAB button at the bottom of the screen and every property is dependent on the _isAnimated bool with initial value set to false.

Flutter has other Implicit Animated Widgets in store for you that can be used to animate a specific property like — AnimatedPadding, AnimatedPositioned, AnimatedAlign, AnimatedSwitcher, and AnimatedCrossFade.

How many claps does this article deserve?

If you find this article useful, please click the 👏 button and share to help others find it! Feel free to clap many times (10💥, 20💥 or maybe 50💥 ?) It fuels my focus to write more of it.

Feel free to leave a comment 💬 below and let me know if I can improve the way I write my posts (I am new to this 🙂) or if you find anything wrong in the code mentioned above. All kinds of suggestions will help me grow and improve.

Feeling like being awesome? Buy me a cup of coffee

⭐️ this repo to show some ❤️ and motivate me to work on the project 😃

Connect with me on LinkedIn or say hi on Twitter, mentioning this article. You can drop a mail at annsh29@gmail.com as well.

Have a wonderful day 🙂

Flutter Community

Articles and Stories from the Flutter Community

Annsh Singh

Written by

Mobile Application Developer 📱 Android | Flutter enthusiast ♥️ Design | Create | Build stuff ⚒️. https://play.google.com/store/apps/dev?id=4716299969505523086

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade