UI feels pretty cool when a touch of animation is sprinkled all over it. It’s been a couple of days since I started diving into Flutter animations. Most of the animations I do are quite simple and require you to just use a widget, and the animation task is done for you. These widgets are called implicit animations. They are basically animations that are controlled by the framework. These types of animations are mostly used for simple tasks like animating the size change of a container or the opacity or color of a widget.

I want to try something different this time, and that led me into researching explicit animations. With these types of animations, you have mostly full control over the animation, including when it starts, how long it takes, the beginning and ending of the animation values, etc. Explicit animations put animations on steroids, and with much familiarity, you can do amazing things. I have been motivated a lot by demos and showcases being put out there by the community, and I decided to give it a try. Animate a simple thing: a hand wave emoji.

Explicit animation fundamentals

To better understand explicit animations, there are a couple of things I first needed to get comfortable with. Explicit animations are basically, as said earlier, about being in full control of the animation; hence, one of the things we need is an animation controller. We also need something to animate and another to hold the beginning and ending values of our animation since our animation is going to play within a finite time.

Animation Controller

Animation controller is a class responsible for controlling and managing animations. It gives you some functionality such as forwarding (starting), reversing, and stopping the animation. The animation controller also gives you the ability to set the total duration of the animation, so if you want your animation to last 2 minutes, you do it here. To use the animation controller, you first need to use a mixin called TickerProviderStateMixin. The TickerProvider class is capable of notifying the controller when a UI frame changes; hence, it is required when dealing with animations since you need to know of UI frame changes.

Animation

The animation class handles our animating objects. It’s capable of notifying us about the status of the animation, whether it’s running or not, and it lets other objects also listen for changes during the “animation” of the object. The animation consists of a value, and at any point in time, we can know the progress of our animated object. The animation controller extends animation. Hence, you could run animations without necessarily creating an animation object. If you want an animation that you can just run forward and backward, consider only using the animation controller class.

Tween

Tweens are quite simple; they let you specify the beginning and ending values of our animation. It returns a linear interpolation from the beginning and ending values. Of course, this can be manipulated with curves if you want to go with a non-linear flow in your animation. With Tweens, you can specify which type of value or property of the object you want to manipulate, If you want to animate the colors, you could specify a color tween and animate between different color values.

With these three classes and a bit more comfort in understanding how they work, you can get started animating widgets explicitly.

Let’s continue in part 2

I felt like this piece would be getting longer, so I have broken it down into two parts. Check out Explicit Animations in Flutter 2 for an example project I worked on.