Animations in Flutter — Getting Started #1
Introduction
Animations in a mobile app adds interactivity to the UI as well as some visual effects to it. Animations, when used correctly, can make a huge difference in how user perceives your app. Every mobile developer wish to add animations in their app, but, they are unsuccessful in doing so, because, there is a lot of complexity and lot of things, a developer has to learn before adding animations.
That’s where Flutter comes in…
Flutter has a very good Animation library that allows you to create complex animations that can run constantly at 60 frames per second very easily.
Overview
In this blog post, I’ll tell you about basics/foundation animation concepts in Flutter that allows you add complex animations very easily.
1. Animation Class
All the animations in Flutter are provided by Animation class. According to the documentation, Animation contains a generic type variable Animation<T> which means that what type of value should should be animated. Most common type of Animation used is Animation<double>
To create and run the animation, we need Animation and AnimationController objects. We’ve seen the Animation class in the above section. In the next section, Let’s see the AnimationController class
2. AnimationController
It is basically a controller for animation, which lets you to perform various operations with the current animation
- Play an animation either in forward or in reverse direction.
- Pause current playing animation
- Stop current playing animation
- Define range of animation — min and max value
- In line 7, we are providing SingleTickerProviderStateMixin with the _HomeScreenState class which basically means that we are providing Ticker with the help of SingleTickerProviderStateMixin class and linking it with this class.
Ticker is nothing, but a class which sends a signal at almost regular interval (e.g. Like watch ticks at every second). At each tick, the Ticker invokes it’s callback method(s)
- In line 14, object of AnimationController is initialised, and it expects 2 parameters — vsync and duration
vsync property binds the AnimationController object with the Ticker and duration specifies the time till which given animation will run.
- In line 15, we’re attaching the listener with AnimationController object and calling setState() which ensures that, each time the value changes, the Widget is rebuilt
- In line 18, animation is started using forward() function provided by AnimationController
- At last, make sure to dispose the given AnimationController object in dispose() method.
Now, you understood the basic concepts of Animation, now, Let’s see the different types of animation
Basic Types of Animation
- Tween
- Curved
Tween Animation
Tween Animation is the type of animation which interpolates between the given range. It linearly interpolates between the begin and end value. In the case of Animation<double>, it linearly interpolates between only double values, but, in the case of Tween, it can interpolates between colors, borderRadius, etc.
In the above code, Tween animation is initialised by giving it’s begin and end value. In this case, we’re specifying 0.0 and 1.0 for begin and end respectively that means it’ll linearly interpolates between 0.0 and 1.0 values and at last, call the animate method and specify the type of animation inside it.
If you want to interpolate between BorderRadius, then, either specify BorderRadiusTween or Tween<BorderRadius>
