Implicit Flutter Animations

When faced with the task of adding animations to our apps, we need to first check if a built-in widget can do the effect we want. Flutter provides widgets like the Drawer, SnackBar, ExpansionTile, Dialogs, Tabs and others. If you don’t find any that gives you the exact animation you want, then you move to creating yours either with implicit or explicit animations.

We’ve seen implicit animations in action. The next question is: “When is the best time to use them?”

To decide, you need to ask the following questions:

1. Are you animating only one child widget?
2. Is the animation continuous?
3. Would the animation be short lived?
4. Are you okay with not having full control of the animation?

If the answers to any of these questions is “yes” then you can use implicitly animated widget. In this course, we created various animations. Let’s see how they pass these tests.

But before we do that let’s restate one point. Our animations were all triggered by a state change. Which means that a target value was changed which in turn created our animations. A change in a target value is the driving force behind implicit animations. And by the way, setState is not the only way to trigger an implicit animation. They can also be triggered by other stuffs like changes in streams and futures and a good scenario is when you work with the StreamBuilder and FutureBuilder widgets. Any class or library that can trigger a change in our ui can be used with implicit animations.

Okay, back to our verifications. First, all our animations passed the first test. We were not animating an array of bubbles or different group of items at once. It was just one child all the time.

Next, all our animations were continuous. From the share button down to the item selector animation. And when we say continuous, we mean that the changing property either increments or decrements from its current value for its animation cycle. That is, they always move forward and never skip values or form for a complete animation cycle.

Although they can be discountinous when we use a certain types of curves like a SawTooth or a custom curve but that’s a different case.

Let’s take the box animation we created from the first episode as an example. The animation always continues from where it stopped while animating which in turn creates the growing and shrinking effect.

And here is a version of this animation that is not continuous. As you can see, the box doesnt shrink to get back to its small size. Instead it skips or rather discontinues its progression and resets back to a small box and then it grows back again. These types of animations are good for loading animations. Also, the animation repeats and this takes us to the third point:

Implicit animations are short lived. They don’t repeat forever. “Forever” used here means as long as the screen is visible or as long a certain condition is met. All our animations animate to a new state and stop. They don’t loop althogh you can use the onEnd parameter of an implictlyanimatedwidget to trigger a change to the previous state but that is not really the best way to create infinite animations. Explicit animations excel in this scenario.

Finally, we have limited control over the details and customizations of our animations. We can’t pause, stop or reverse it. We can’t do stuffs like triggering a different animation at a certain interval. We don’t have access to the animation objects that controls the animation although the AnimatedSwitcher gives us access to the animation object for transitions as we saw in earlier episodes but we still have some limits. Plus, this is not common with other implicit animated widgets.

As you can see, implicit animations gives us access to animate stuffs without worrying too much about how things work. If you want fast and easy animations that don’t require much setup and fulfils the requirements listed here, then implicit animations is the way to go.

There are various portions of the app that could still be animated. I’ll leave you to find them out and explore ways you could add implicit animations to the app.