Animations in Flutter : Implicit Animations

Are you looking to create some beautiful animations in flutter but don’t know how?
Let’s learn that together.

So what are animations in Flutter ?

Flutter draws everything you see on top of a canvas. Yes, every pixel you see is painted by the Flutter engine. Flutter animations are drawn frame by frame and this simplicity is what gives Flutter its performance on all the platforms it support. When you start creating those beautiful animations you’ll see that there are many ways to animate in flutter and with all that power comes great responsibility. One can be overwhelmed by the choices you’ve and get confused about what suits best to your need. First, we’ll go through the types of animations in flutter and then learn about each one of them.

Let’s Get Started!!!

Types of ways to Animate in Flutter

1. Implicit Animations: Implicit Animations are the ones that rely on you for providing the value for the property that you want to animate for a widget. Flutter takes care of the transitions and lifecycle of the animation for you.
2. Explicit Animations: These Animations require you to specially control the overall lifecycle of the animation. That means you control how and when it starts? how it transits? and how it ends?
3. Animations With CustomPainter: Animations with CustomPainter are like drawing on a canvas, where you tell Flutter engine to draw something, provide necessary steps to draw it on the canvas, and control the drawing process.
4. Render Objects: Widgets are rendered by a Render objects. They hold the layout properties for a widget and control their drawing . You would find their use rarely in normal animations though some more advanced animations might just be easier to do with render objects than using widgets directly.
5. Using External packages and third-party tools: If what you want to create seems hard to do with code or if your animation involves the use of SVG and vectors then you can use some external packages and third-party tools like Rive and Lottie to create them.

Implicit Animations

If your animation does only one thing that’s it animates from one value to another and is a single widget then you should go with implicit animations. Implicit animations offer the easiest and fastest way to get started with animations in Flutter.

Let’s see what an example of it may look like

We’ll create this simple animation that increases the height of the container when the button is pressed.

Hmmm, what’s the AnimatedContainer there? Guess, what! In Flutter we are also provided with some pre-packaged implicit animations that we can use. They are called AnimatedFoo widgets. Where foo represents the property you want to animate. Whenever you set a new value they will get rebuild with the transition going from old value to new value. You can set the duration for animation and the curve for the transition to happen. There are also some other parameters that you can play with. Interesting, right! Like this we have

• AnimatedOpacity : You can use this to animate the object’s opacity implicitly.
• AnimatedPadding: Allows you to animate the padding around any widget .
• AnimatedList: To animate insertion and removing of items from a list.
• AnimatedContainer: This is a pretty handy widget if you’re looking for size/dimensions animations on a widget.

Now you understood about some Implicit Animations, that’s great! They are a nice way to start but what if you don’t find any AnimatedFoo for the property you want to animate?

TweenAnimationBuilder

For this, we have TweenAnimationBuilder which is a way to build your custom implicit animations with more control over them.

Let’s have a look at them in the following example

Here we pass a tween object to the TweenAnimationBuilder that holds the start and end values of the animation. What are those tween objects here? Tween object represents the set of values for a property that you want to animate. Whenever the tween value changes the builder is called and the widget underneath it is rebuilt with a new value.

Builder of the TweenAnimationBuilder takes three arguments

1. context
2. value : Holds the animation value at any given time.
3. child: Widget that won’t rebuild in the animation.

Somethings to know when working with TweenAnimationBuilder:

• Animation starts as soon as the build method is called on the widget for the first time.
• Builder method of the TweenAnimationBuilder is called everytime animation value changes.
• The animation is only in one direction. Not suited for animation that needs to repeat.
• No need to use StateFulWidgets. Reduces the boilerplate code.

That’s it. Those were some of the things you need to know when getting started with Implicit Animation in Flutter.
Next up we’ll dive little deep into different AnimatedFoos and use them to create some nice interactions.

Hope you enjoyed reading this and learnt something new and useful today. More such articles coming where I explore animations in flutter and we together build some really nice interactions with them.

Follow up for upcoming articles if you enjoy reading what I write. A clap will be appreciated.
Thanx :)