Enhancing Flutter apps with Animations
Animations in simplest words are visual elements that add up to enhance the user’s experience using an app. Apps with animations keeps the user more engaged and can also attract new users as they tend to be more informative and visually appealing.
Animations in Flutter can be classified into two types:
- code based — animations here are written in code
- drawing based — animations are first drawn, and then animated but without code
Code based animations:
As the name suggests, here, the animations are written in code. In the screen image below, the containers when clicked upon have a certain bounce effect. This effect was achieved by adding animation code.
This type of animation can be performed on existing widgets like container, stack, row, column, etc and styles like color, textStyle, etc.
Types
- Implicit animation — for simpler animations
- Explicit animation — gives user the control to control the animation
Implicit animations:
This type of animation is preferred when you want to add simple animations, for example, changing the size and color of the container. However, once animated, you cannot go back to the original position. Hence, the user has no control over the animation once animated.
a. Built-in implicit animations — also called as AnimatedFoo widgets, they are animated versions of the flutter widgets where Foo are the flutter widgets. Some AnimatedFoo widgets can commonly be:
Target value can be set and the widget animates from old value to target value in the given duration. Comparatively easier as you only have to set the target value and the rest of the work is done by Flutter.
Only supports animations that can go forward. If you want to reverse the animation, or repeat the animation forever, then you have to use Explicit animation
In the screen image above, once the button is clicked, random size is generated using Random() and it is assigned to the width and height of the AnimatedContainer, the color is also randomly generated.
As for the AnimatedContainer, the size and the color change with every button click.
However, with this type of animation you will notice that there is no way to go back to the starting position of the AnimatedContainer.
b. Custom implicit animations — using Tweens and TweenAnimationBuilder. Tween simply means “in-between”. Tween object allows you to specify a range of values to animate between.
TweenAnimationBuilder returns the animated widget at any given point in time.
Let’s take the example of a slider, every time the value changes, the slider will change. We can add animation to such widgets using Tween class. It basically adds animation between a start and an end value.
The builder takes context, value and a child. The value here is the new value that was generated when the slider was updated.
And because the widget needs to be rebuilt every time the slider value changes, the TweenAnimationBuilder rebuilds the widget.
Explicit animations:
We saw earlier in implicit animation that once the animation occurs you can never go back to the original state from where you started, and that is because implicit animations are one way. You cannot reverse or repeat the animation.
But sometimes you might want to reverse/repeat the animation, then we can use explicit animations. Here, the user can control the state of the animation, using AnimationController.
AnimationController class requires
- SingleTickerProviderStateMixin
- vsync
that tells Flutter that there is some animation in this widget and this widget needs to be notified about the animation frames of flutter.
If the widget uses more than one controller, then you should be using TickerProviderStateMixin.
It is always a best practice to dispose the controller using the dispose() method to avoid memory leaks.
You must be thinking how do we control the animation using AnimationController?
AnimationController provides several methods for “driving” an animation:
- repeat() — starts and finishes the animation and then repeats itself
- forward() — starts and waits till the animation finishes and then stops
- reverse() — starts and when reverse is applied, stops at the current state and reverses the animation till it stops, does not repeat
- stop() — stops at current state
- reset() — stops at current state and resets
They are an extension of AnimatedWidget.
They are also called as FooTransition widgets, where Foo is the Flutter widget that will be animated. Some common FooTransition widgets are:
- FadeTransition
- RotationTransition
- PositionedTransition
- SlideTransition
The above screen image has a container that fades when the different buttons are clicked.
When the Start button is clicked, the container starts animating where it fades, once it completely fades, it resets the animation.
When the Pause button is clicked, the container pauses the animation at the current state.
When the Stop button is clicked, the container stops the animation at the current state.
Simply wrap the Container with the FooTransition widget(here, FadeTransition) and provide the duration of animation.
Drawing based animations:
Sometimes we prefer to use animations that are drawn and do not require coding, in such situations we can import these files using third party package, like
- Lottie — https://lottiefiles.com/featured
- Rive — https://rive.app/community/
There are two ways to use these types of animations:
- Download the animation file and place it in assets folder, and declare the folder in pubspec.yaml and use it like this:
2. Use the url of the file
They provide high-level animations, something which is difficult to code, and they are extremely easy to import in flutter apps.
By now, you should at least have an idea of what animations are and why it is better to have them in apps. If you wish to learn more about animations, Flutter docs provide plenty of resources at https://docs.flutter.dev/development/ui/animations
Also, you can find my talk on this topic at https://youtu.be/-9kVd6tsyyo
Feel free to leave a comment and share as much if you found it helpful!
Follow Flutter Community on Twitter: https://www.twitter.com/FlutterComm
