Implicit Flutter Animations

Hello everyone, I’m Yogesh and welcome to the Flutter Implicit Animations course. I’m sure you all like the apps that are visually good looking and have cool animations in it. These animations provide you, as a user a rich and fluent experience. Something that you enjoy interacting with everytime you use the app.

Flutter enables you, as a developer, to create animations in your app from simple to very complex ones. This course covers one such way, which is using implicit animations. So, prepare yourself to learn and code cool animations in Flutter. Now, this original course was produced in 2021. I’ve gone through this course to make sure everything is working fine and is up to date. But the core concepts still remains the same.

The major change in the download material was migrating it to null safety and making the sample app work on multiple platforms that Flutter supports right now, i.e., Android, iOS, Web, Mac, Windows, and Linux. It is important that you read the author note of each episode before watching them to understand the changes. That’s it from my side. Next you will hear Emmanuel taking you through the course.

Animations involves smooth transitions of properties of widgets on our screens.

This could be something simple like:

• fading in an element,
• moving its position,
• page transitions,
• or more complex animation sequences.

In Flutter, everything is a widget and Flutter gives us lots of widgets to produce different types of animations. But just before we dive into Animations in Flutter, let’s understand some animation concepts that would help us as we proceed in this course.

Take this crane for example. We want to move it from point A to point B over a period of 1 second. Let’s do that now.

It instantly jumped from point A to B and this is not the desired effect we want. But first, would you call this an animation?

Well, yes it is an animation. But why does it not move smoothly to pont B? Why does it jump?

The reason is simple. The animation occured at just 2 points over a period of 1 second.(Fade back in the first image) The start point and the end point. These points are called frames and a frame is just an individual image in an animation.

Now, to produce the illusion of the animation we are used to, all we need to do is add more frames inbetween the start and end points. These additional frames gives us the illusion of animation and if you play the animation once more, it should move smoothly to point B.

Now, you might be wondering why i am calling animation an illusion, right? Well, it is an illusion simply because all you’re seeing are different pictures playing at a very fast speed which makes the eye believe the picture is actually moving. Okay, so how many frames should we produce per second to give a smooth animation?

Well, the human eye needs about 24 frames per second to perceive an animation as smooth and this is what is used in the movie industry.

But most modern devices produces 60 frames per second and some produce up to 120 frames per second. 60 frames per second is the base accepted frames per second for smooth mobile animations and Flutter handles these pretty well.

The production of frames per second is also known as “Frame Rate” and it is dependent on the device used. And this number can be used while debugging your apps to check if your animation is performant.

So animations in Flutter is just a way to rebuild parts of your widget tree in every frame whenever a property changes via setState or some other means.

Since everything is a widget in Flutter, Flutter gives us different types of widgets that helps us create animations. These widgets produce animations that are grouped under two main groups:

• Implicit Animations: which are created with widgets that hides the complexities of managing and controlling the animation objects. You just set a target value and the widget handles the animation for you. AND
• Explicit Animations: which are created with widgets that gives us full control of how we manage the animation and these types of animations can be further customized since we’re handling everything explicitly.

In this course, we would cover implicit animations and explore practical examples and scenarios when they can be used.

The sample project for this episode is just a very basic app containing a Container and a FAB. And from the code, we have a size variable in which the Container depends on for its width and height.

The onPressed callback function of the FAB toggles the size variable via setState. The causes the Container to rebuild with the updated size whenever the button is clicked.

This results in a grow and shrink animation OR would it? Let click on the FAB to find out.

This process takes the Container from 100 to 200 instantly without any animation. But if you followed the earlier explanation, you’ll understand the an animation occured but just it just happened with just two frames. The start and the end frame. We need a way to animate the Container in between those two values. Update your code to the following:

...
AnimatedContainer(
    duration: const Duration(milliseconds: 1000),
    ...
)
...

We changed the Container to an AnimatedContainer and added a duration of 1000 milliseconds which equals to 1 second. Note: The duration is a required property.

Save your work and let’s try it out. Cool!!! This time around, the Container animates with more frames in between. It did not just go to 200 instantly, instead it interpolates through the numbers in between to create the desired grow and shrink animation.