Flutter — Animation overviews

How to choose which Flutter animation is right for you?

Image for post
Image for post

Adding some animations to the app makes it more smooth, and improves the user experience. However, it sometimes confuses us that which approach should we take to achieve the animation. Today, we’re going to figure out the right way for us. In this post, you’ll see a series of questions that will help you determine what kind of solution should be used.

Basically, this post refers to this video from the Flutter team. Before we get started, I strongly recommend you to watch this amazing video.

Table of contents

  1. Drawing-based animations or Code-based animations
  2. Code-based: Implicit Animation or Explicit Animation
  3. Implicit Animation
  4. Explicit Animation
  5. CustomPainter
  6. Summary and difficulty

1. Drawing-based animations or Code-based animations

Is it like a drawing?

The first question to decide which way to use is to ask yourself: Is it like a drawing? For example, the following GIF is definitely a customized animation created by ourselves or the design team.

Image for post
Image for post
This animation was illustrated by Vijay Verma

or it seems difficult to approach by code like

Image for post
Image for post
Gif from https://lottiefiles.com/834-download-icon#

Then the answer would be yes.

So, if your answer is…

Yes — Drawing-based animations

The Flutter team recommends us use the 3rd party packages, like Flare, Lottie, or other packages. We can easily implement the animation provided by the design team. For the details, I’ll write in the other posts. Stay tuned.

No — Code-based animations

We can make some mutations on widgets like changing color, position, rotation, etc. It is faster and intuitive to write it by code directly. Basically, code-based animations could be divided into implicit animation and explicit animation.

2. Code-based: Implicit Animation or Explicit Animation

Okay, now we know we need a code-based animation. Then there are three questions to ask ourselves to determine which type of animation we need, implicit animation or explicit animation.

Does it repeat “forever”?

The answer is yes when the animation needs to keep playing while on a certain screen or a certain condition is true, such as music playing.

Is it “discontinuous”?

The answer is yes when the animation is discontinuous. For example,

Image for post
Image for post

The square grows from small to large, it never shrinks back from large to small again. Then we can say it is discontinuous.

Do multiple widgets animate together?

The answer is yes when multiple widgets are animating in a coordinated fashion together.

Image for post
Image for post
From https://www.youtube.com/watch?v=GXIJJkq_H8g

If your answer is yes to any of those three questions, then you should use explicit animation; Otherwise, use implicit animation.

3. Code-based: Implicit Animation

The implicit animation could be divided into built-in widgets and customized widgets.

3.1. Built-in implicit animation widgets

Image for post
Image for post

ImplicitAnimtatedWidget is an abstract class for building widgets that animate changes to their properties. A number of implicitly animated widgets ship with the framework. They are usually named AnimatedFoo:

These widgets are simple and don’t require us to manually manage the lifecycle of an AnimationController. We can just change the value and rebuild the widget, and then the animation happens. Here is an example of one of the animated widget, AnimatedContainer:

Image for post
Image for post

Whenever users click the container, we rebuild the widget by invoking setState(), and the values such as the size, color of the container would be changed with animation. This is really convenient that we don’t need to care about any detail of the animation, but only telling what’s the next style of the widget we want.

Moreover, ImplicitAnimtatedWidget also allows us to assign some parameters.

  • Curve:
    The official document is very clear and sweet that they show all the built-in curve behaviors in videos. So if you want to change the animation curve, just pick what you want.
  • duration:
    This literally means the duration of the animation. It can be days, hours, minutes, seconds, milliseconds, even microseconds.
  • onEnd:
    We can do something after the animation finishes.

3.2. TweenAnimationBuilder

Image for post
Image for post

If we cannot find a proper animation in built-in implicit animation, we can create our own animation by using TweenAnimationBuilder. TweenAnimationBuilder also inherits from ImplicitlyAnimationWidget. We could provide the begin and end values and create our own widget in builder, then the TweenAnimationBuilder will take care of everything and present an awesome animation.

Image for post
Image for post

4. Code-based: Explicit Animation

Explicit animation means the animation starts when explicitly asked to. It requires an AnimationController, which allows us to

Life cycle

We need to handle the life cycle of the animation controller, which means it should be disposed when it is no longer used. Basically, we can create it in State.initState and dispose it in State.dispose with a StatefulWidget.

AnimationController _animationController;@override
void initState() {
super.initState();
_animationController = AnimationController(...)
}
@override
void dispose() {
super.dispose();
_animationController.dispose();
}

Just like implicit animation widgets, explicit animation widgets could be divided into built-in widgets and customized widgets as well.

4.1. Built-in explicit animation

Image for post
Image for post

AnimatedWidget is an abstract class which rebuilds when the given Listenable changes value. It can be used with any Listenable, most common is Animation, but it also can be ChangeNotifier and ValueNotifier.

A number of animated widgets ship with the framework. They are usually named FooTransition.

Take RotationTransition for example,

All we need to do is creating an AnimationController and a widget, then put them into a RotationTransition. You can see the widget begins to rotate.

Image for post
Image for post

4.2. Custom explicit animation

If the built-in widgets don’t meet your needs, you can probably create it by yourself. And there are two ways for it, but both can achieve what we want. It’s all just a matter of taste. So before doing it, ask yourself:

Do I want my animation to be a standalone widget or part of another surrounding widget?

  • Standalone widget
    you can create your custom widget by extending AnimatedWidget

Or you can wrap your widget with AnimationBuilder.

Image for post
Image for post

5. CustomPainter

CustomPainter is used for an extremely custom effect or saving on performance. We can draw directly on the canvas. But do care that it may cause other performance issues if we draw the painting in an inappropriate way. If you’re interested in that, check out this video:

6. Summary and difficulty

Image for post
Image for post

The Flutter team provides a flow chart of all the steps mentioned above. We can determine which approach is the best for us by going through the questions quickly.

Difficulty

Image for post
Image for post

There’s one more thing I’d like to mention is the difficulty of all the solutions. As we can see, the complexity is

  1. ImplicitAnimatedWidgets < ExplicitAnimatedWidgets < CustomPainter.
  2. Built-in widgets < Customized widgets.

So when you start to decide which way to use, please also consider the complexity. It would be helpful to evaluate how long will it take to implement the animation.

That’s all for today. Hope this post helps you know more about the animations. If you have any questions or suggestions, please comment below to let me know. I am glad to discuss this more with you guys. Thanks for your time reading the post, see you next time. ✋✋

An Android/Flutter engineer at Line Corporation.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store