Flutter Animation

 

The animation is a very powerful and important concept in Flutter. We cannot imagine any mobile app without animations. When you tap on a button or move from one page to another page are all animations. Animations enhance user experiences and make the applications more interactive.

Flutter provides excellent support for animation and can separate the animation into two main categories, which are given below:

• Tween Animation
• Physics-based Animation

Tween Animation

It is the short form of in-betweening. In a tween animation, it is required to define the start and endpoint of animation. It means the animation begins with start value, then goes through a series of intermediate values and finally reached the end value. It also provides the timeline and curve, which defines the time and speed of the transition. The widget framework provides a calculation of how to transition from the start and endpoint.

Example

1. ColorTween {  
2.     begin: color.green,  
3.     end: color.blue,  
4. }  

Physics-based Animation

It is a type of animation which allows you to make an app interaction feels realistic and interactive. It simulates the real-world animation/movement, such as you want to animate a widget like spring, falling, or swinging with gravity. Thus, it is an animation that animates in response to user input/movement. The simplest example is the time of flight, and the distance of travel covered will be calculated according to the laws of physics.

Flutter provides two types of techniques for animation. These techniques are:

1. Implicit Animation
2. Explicit Animation

The following figure sets out the animation hierarchy in Flutter and explains it more clearly about the implicit and explicit animation.

Now, we are going to see how we can create explicit animation in Flutter. There are mainly three pillars of an animation, which are given below:

1. Ticker
2. Animation Class
3. AnimationController

Ticker

The Ticker is a class which sends a signal at a regular interval, i.e., around 60 times per second. You can understand it with your watch, which tics at regular intervals. At each tick, Ticker provides a callback method with the duration since the first ticks at each second, after it was started. Even if the tickers started at different times, it always synchronized automatically. The reason behind this is that the tickers give their elapsed time relative to the first tick after it was started.

Animation

The Animation class is the core building block of the animation system. The animation is nothing else, but it represents a value (specific type) that can change over the lifetime of an animation. In Flutter, the widgets which perform an animation take an animation object as a parameter. This Animation object gives the information from which they read the current value of the animation and to which they listen for changes to that value. The animation class contains two methods addListener() and addStatusListener(). When the value of animation changes, it notifies all the listeners added with addListener(). Again, when the status of the animation changes, it notifies all the listeners added with addStatusListener().

The most common Animation classes are:

• Animation<double>: It interpolates values between two decimal numbers over a certain duration.
• Animation<Color>: It interpolates colors between two color values.
• Animation<Size>: It interpolates sizes between two size values.

Animation Controller

The animation controller is a class that allows us to control the animation. It always generates new values whenever the application is ready for a new frame. For example, it gives the controlling of start, stop, forward, or repeat of the animation. Once the animation controller is created, we can start building other animation based on it, such as reverse animation and curved animation.

1. animcontroller = AnimationController(vsync: this, duration: Duration(milliseconds: 2500));  

Here, the duration option controls the duration of the animation process, and vsync option is used to optimize the resource used in the animation.

The basic steps necessary for using an AnimationController are:

Step 1: First, instantiate an AnimationController with parameters, such as duration and vsync.

Step 2: Add the required listeners like addListener() or addStatusListener().

Step 3: Start the animation.

Step 4: Perform the action in the listener callback methods (for example, setState).

Step 5: Last, dispose of the animation.

Let us see a simple animation example, which uses an animation class and animation controller. The following example shows the tween animation that gives the start and endpoint of animation. Open the project and replace the following code in the main.dart file.

1. import 'package:flutter/animation.dart';  
2. import 'package:flutter/material.dart';  
3.   
4. void main() => runApp(MyApp());  
5.   
6. class MyApp extends StatelessWidget {  
7.   // This widget is the root of your application.  
8.   @override  
9.   Widget build(BuildContext context) {  
10.     return MaterialApp(  
11.       title: 'Flutter Animation',  
12.       theme: ThemeData(  
13.         // This is the theme of your application.  
14.         primarySwatch: Colors.blue,  
15.       ),  
16.       home: MyHomePage(),  
17.     );  
18.   }  
19. }  
20. class MyHomePage extends StatefulWidget {  
21.   _HomePageState createState() => _HomePageState();  
22. }  
23. class _HomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {  
24.   Animation<double> animation;  
25.   AnimationController animationController;  
26.   @override  
27.   void initState() {  
28.     super.initState();  
29.     animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 2500));  
30.     animation = Tween<double>(begin: 0.0, end: 1.0).animate(animationController);  
31.     animation.addListener((){  
32.       setState((){  
33.         print (animation.value.toString());  
34.       });  
35.     });  
36.     animation.addStatusListener((status){  
37.       if(status == AnimationStatus.completed){  
38.         animationController.reverse();  
39.       } else if(status == AnimationStatus.dismissed) {  
40.         animationController.forward();  
41.         }  
42.       });  
43.       animationController.forward();  
44.     }  
45.   @override  
46.   Widget build(BuildContext context) {  
47.     return Center(  
48.       child: AnimatedLogo(  
49.         animation: animation,  
50.       )  
51.     );  
52.   }  
53. }  
54. class AnimatedLogo extends AnimatedWidget {  
55.   final Tween<double> _sizeAnimation = Tween<double> (begin: 0.0, end: 500.0);  
56.   AnimatedLogo({Key key, Animation animation}):super(key: key, listenable: animation);  
57.   @override  
58.   Widget build(BuildContext context) {  
59.     final Animation<double> animation = listenable;  
60.     return Transform.scale(  
61.       scale: _sizeAnimation.evaluate(animation),  
62.       child: FlutterLogo(),  
63.     );  
64.   }  
65. }  

Output

When you run the application in Android Studio, you will get the output. In the screen, you will see that the Flutter logo scaling in forward and reverse direction.

Curved Animation

The curved animation is very useful when you need to apply a non-linear curve with an animation object. Thus, it defines the animation's progress as a non-linear curve.

Syntax:

1. CurvedAnimation(parent: animationController, curve: Curves.bounceOut));  

Let us understand it with the previous example. To add a curve, open the previous app in the android studio and add CurvedAnimation instead of animationController. Or replace the following line:

1. animation = Tween<double>(begin: 0.0, end: 1.0).animate(animationController);  

With the line below.

1. animation = Tween<double>(begin: 0.0, end: 1.0).animate(animationController);  

Now, when you run the app, you will see a bouncing effect with the Flutter logo during scaling in forward and reverse direction.

Hero Animation

A hero animation is a type of animation where an element of one screen flies to a new screen when the app goes to the next page. We can understand it with the following example where an animation takes an element like icon/image, and once you tap on the icon, the screen flies to the next page. The following example explains it more clearly.

Open the Flutter app and replace the following code in the main.dart file.

1. import 'package:flutter/material.dart';  
2.   
3. void main() => runApp(MyApp());  
4.   
5. class MyApp extends StatelessWidget {  
6.   // This widget is the root of your application.  
7.   @override  
8.   Widget build(BuildContext context) {  
9.     return MaterialApp(  
10.       title: 'Flutter Application',  
11.       theme: ThemeData(  
12.         primarySwatch: Colors.orange,  
13.       ),  
14.       home: HeroAnimation(title: 'Hero Animation'),  
15.     );  
16.   }  
17. }  
18.   
19. class HeroAnimation extends StatefulWidget {  
20.   HeroAnimation({Key key, this.title}) : super(key: key);  
21.   final String title;  
22.   
23.   @override  
24.   _HeroAnimationState createState() => _HeroAnimationState();  
25. }  
26.   
27. class _HeroAnimationState extends State<HeroAnimation> {  
28.   
29.   Widget _greenRectangle() {  
30.     return Container(  
31.       width: 75,  
32.       height: 75,  
33.       color: Colors.green,  
34.     );  
35.   }  
36.   
37.   Widget _detailPageRectangle() {  
38.     return Container(  
39.       width: 150,  
40.       height: 150,  
41.       color: Colors.red,  
42.     );  
43.   }  
44.   
45.   @override  
46.   Widget build(BuildContext context) {  
47.     return Scaffold(  
48.       appBar: AppBar(  
49.         title: Text(widget.title),  
50.       ),  
51.       body: buildDemoWidget(context),  
52.     );  
53.   }  
54.   
55.   Widget buildDemoWidget(BuildContext context) {  
56.     return Center(  
57.       child: Column(  
58.         crossAxisAlignment: CrossAxisAlignment.start,  
59.         children: <Widget>[  
60.           SizedBox(  
61.             height: 30.0,  
62.           ),  
63.           ListTile(  
64.             leading: GestureDetector(  
65.               child: Hero(  
66.                 tag: 'hero-rectangle',  
67.                 child: _greenRectangle(),  
68.               ),  
69.               onTap: () => _gotoDetailsPage(context),  
70.             ),  
71.             title: Text('Tap on the green icon rectangle to analyse hero animation transition.'),  
72.           ),  
73.         ],  
74.       ),  
75.     );  
76.   }  
77.   
78.   void _gotoDetailsPage(BuildContext context) {  
79.     Navigator.of(context).push(MaterialPageRoute(  
80.       builder: (ctx) => Scaffold(  
81.         body: Center(  
82.           child: Column(  
83.             mainAxisAlignment: MainAxisAlignment.center,  
84.             children: <Widget>[  
85.               Hero(  
86.                 tag: 'hero-rectangle',  
87.                 child: _detailPageRectangle(),  
88.               ),  
89.               Text('This is a place where you can see details about the icon tapped at previous page.'),  
90.             ],  
91.           ),  
92.         ),  
93.       ),  
94.     ));  
95.   }  
96. }  

Output

When you run the application in Android Studio, you will get the following screen.

To show the hero animation, tap on the green icon, it will immediately fly to a new screen where you will get the details about the tapped item.