Master Flutter implicit animations and implicitly animated widgets
Motivation
As for 2021, I’ve been a flutter developer for 3 years, and if there is something that I always skipped learning that must be animations (and a couple of other stuff 😁), animations always seemed complex, and half the time I did not have to use animations to my flutter apps, as long as they work, after all, I am a software engineer not a designer right? WRONG!!
And I did not realize how wrong I was until I joined a small startup as a flutter developer and my first task was “copy the stories features from Instagram”, on that exact second I cannot tell you how much I wished I knew how to animate in flutter.
Now, I know a thing or two about animations and I will be sharing what I know with you, and hopefully, I will make you realize how awesome it is to know how to animate in flutter and make you realize that it's not as hards as it seems.
Before you Start…
Now, in this article, we will not be using any third party library only flutter and the good old setState(), nevertheless, there are two pre-requisites to make your learning process as smooth as possible, I think that in order to get the most value out of this article is important to be familiar with the Transform widget and Matrix4, I will link some awesome resources below.
Animations In Flutter
When it comes to animations in flutter there are plenty of options, and having plenty of options is scary (at least for me), the flutter official docs has an amazing flow chart that can help you decide which animation approach you should use depending on your use case. But as a quick summary, we can divide flutter animations into drawing like animations on such cases you would want to use a third-party library such as rive or custom painters, or they can be code-based animations, the code based animations can be implicit animations which are the simplest ones and usually only require a target or a range of values to animate through, and the duration of the animation, or they can be explicit animations which are relatively more complex compared to the implicit animations, but they provide you more control over the animation, reference the flowchart below for better clarity.
In this article, we will focus only on implicit animations, and in the next one, we will talk about explicit animations.
Implicit animations in flutter
Implicit animations are the simplest form of animation in flutter, these types of animations are useful in the following cases:
- If the animation that you are trying to build does not have to repeat forever, for example, a container that starts small and grows over a specified duration.
- if the animation only goes forward, going back to the container example, by “only going forward”, we meat that the given container is only required to animate from small size to big size, and not reverse the animation.
- if you wish to animate a single widget, for example, adding a fade-in effect to a text widget when the user first opens a given screen.
We can create implicit animations in flutter either by using implicitly animated widgets or using a tween animation builder.
Animated widgets
Animated widgets are widgets that extend the abstract class ImplicitlyAnimatedWidget, by extending ImplicitlyAnimatedWidget, animated widgets can animate its parameter implicitly.
Animated widgets automatically animate changes in their properties whenever they change. For this, they create and manage their own internal AnimationControllers to power the animation. While these widgets are simple to use and don’t require you to manually manage the lifecycle of an AnimationController, they are also somewhat limited: Besides the target value for the animated property, developers can only choose a duration and curve for the animation
For better clarity let's have an example, let's say you want to change the properties of a container and the properties are its size, color, and border radius, and you wish to display a cool animation while the change occurs,
so your starting code would be something like this:
The code above will produce a simple container widget, that values of _width, _height, _color, _borderRadius, are initialized when we declare those variables, now if we wanted to give this container the ability to animate its properties we would convert it into an animated container.
If you pay attention you will notice that the only thing that you need to convert a simple container into an animated one, is to change its name to AnimatedContainer, and this logic is the same for all widgets that have an animated version, so, for example, to turn a positioned widget into an animated positioned you would add Animated to its name if the widget name is Foo() its animated version would be AnimatedFoo(), for every single animated widget, the durations property is a required property. here is a list of the most common animated widgets in flutter
Target Values
When we talk about animated widgets, the target value is the property that will trigger the animation when its updated, if we go back to the container example, the target values are _width, _borderRadius, and all of the other variables that are passed as parameters to the AnimatedContainer widget, if we change the values of those variables and update the state of the widget, the animation will be automatically triggered.
Let's create a button to do just that…
CustomButton is a custom widget with the onTap property, every time the button is pressed the variables _width and _height, will be set to random values using the method _randomValue(), the output will be the following.
The End…?
So… this is the end of this article, but worry not, because this is just the first part of a 4 parts series of flutter animation articles, if you want to test this code for yourself you can access this project in this repo
And if you enjoyed this articles, I think that you will like my youtube channel
Keep coding and see you soo…
