Animations in Flutter


No one loves boring, dull-looking apps! It’s time to learn some animations with which you can make your apps look appealing!

Adding animations to your app can be a bit difficult but exciting simultaneously! It is really a great concept to learn in Flutter! There are many ways you can add animations to your flutter app. Let’s see in this article 🥳

Flutter SDK provides 2 types of Animations: Implicit Animations and Explicit Animations.

Implicit Animations

Implicit Animations are those Animations that are already available in the Flutter SDK and you don’t have to do much of the work. It can directly be used in your application!

Explicit Animations

These are the animations that you can build on your own using AnimationBuilder, AnimationController, etc.

Let’s start with the magic!

Implicit Animations

Implicit Animations contains many in-built widgets which we can animate. Here is the list of animated widgets:

For example, if we consider AnimatedContainer, it animates the properties of the container whenever it is rebuilt. So, let’s suppose that you want to change the height of the container when the user taps on it. When this happens, and if you are using AnimatedContainer, the height of the container will be changed but with simple animation.

The above example changes the container’s height, width, color, and alignment when the user taps on it.

Explicit Animations

Explicit Animations are the animations where you have to sharpen your mind, get to work and create your own animations using AnimationController. This class lets you perform tasks such as:

By default, an AnimationController linearly produces values that range from 0.0 to 1.0, during a given duration. The animation controller generates a new value whenever the device running your app is ready to display a new frame (typically, this rate is around 60 values per second).

To use AnimationController, you have to extend your class with TickerProviderStateMixin.

Hence, let’s suppose you want to show a bouncing ball effect, then you can initialize your animationController and run the animation in initState.

In the above code example, we initialized the controller in initState and then called the repeat method available on the controller. This would repeat the animation once the value reaches the upperBound. Inside the container, we have used controller.value to get the current value of the controller and use it as the margin value.

Hope you enjoyed this article!

Doubts? Feel free to drop a message @AbhishekDoshi26

Don’t stop, until you are breathing!💙
– Abhishek Doshi

Animations in Flutter 💙 was originally published in Google Developers Experts on Medium, where people are continuing the conversation by highlighting and responding to this story.

1 comment
Leave a Reply

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

Previous Post

Using Live Templates to Improve Android Development Productivity

Next Post

Prologue — One devs journey

Related Posts