How to Add Animations in Flutter

When we introduce Flutter , we mention how easy it is , how fast it is , and how we can create cross platform applications with unique customizable views . We can also show examples of great apps done with flutter like Hamilton App or Reflectly.

People use only 10% of the brain similarly people use only 10% of flutter.

Any complex UI and animation in flutter can be achieved by using the triangle of complex UI . We have three classes in the triangle of complex UI which are the core of most of the complex UI.

Stack is a simple class which is used to put one widget on top of another , for example having some text and an image, overlaid with a gradient and a button attached to the bottom.

Stack( children: <Widget>[ Container( width: 100, height: 100, color: Colors.red, ), Container( width: 90, height: 90, color: Colors.green, ), Container( width: 80, height: 80, color: Colors.blue, ), ], )

Each child of a Stack widget is either positioned or non-positioned , we can position a widget in the stack by wrapping it in positioned widget , Positioned widget is a very powerful widget which allows us to actually put the widget anywhere we want unlike the row, column or align. The following are the parameters of positioned

Positioned( height: 0, width: 0, left: 0, right: 0, top: 0, bottom: 0, child:(), )

Each Transform is a widget that helps us to change the way a widget is being painted , for example we can transform-translate and move the position of the widget , or transform-scale to shrink or enlarge the widget , or transform-rotate and rotate the widget in any angle and direction . This class is very useful for custom shapes and animations in flutter . Types of Transform Class: 1 Transform.translate . 2 Transform.scale 3 Tansform.rotate Transform.translate - Transform.translate translates the child by a specified amount in the X and Y direction . An offset has to be provided by which the child moves in the X and Y directions.

Transform.translate( offset: Offset(100.0, 0.0), child: Container( height: 100.0, width: 100.0, color: Colors.blue, ), ),

Have to provide an offset which moves the container 100 in the X direction , we can move it in the Y direction by changing the second parameter in the offset. Transform.scale- The Transform.scale is used to scale the child widget by the scale provided in the scale parameter.

Transform.scale( scale: 0.5, child: Container( height: 200.0, width: 200.0, color: Colors.yellow, ), ),

Provided scale as 0.5 to reduce the size of the container by half , there is also an option to provide origin , if origin is not provided the center of the widget is taken as the origin.

If an origin is provided for example origin(50.0,50.0) this corresponds to the lower right corner Transform.scale( scale: 0.5, origin: Offset(50.0, 50.0), child: Container( height: 100.0, width: 100.0, color: Colors.blue, ), ),

Transform.rotate- This widget is used to rotate the child by an angle

Transform.rotate( angle: 1.0, child: Container( height: 200.0, width: 200.0, color: Colors.pink, ), ), This widget also has a property origin as in transform.scale , this takes an offset , if an origin is not provided the child rotates around its own center.

Animation Controller : Animation controller is used to control animations , it helps us to go from one number to another number in a smooth way , we can use that number to smoothly transition rotate, transition scale , transition scale and change opacity of our widgets and many more.  This is used to control the animation start , fling or stop an animation

Setting up Animation Controllers and Animations: We need to define our animations and controller to control the animations. Before we do this, we need to add a mixin to our class for vsync for the Animation controller

class _MyHomePageState extends State<MyHomePage> with  SingleTickerProviderStateMixin {

The mixin provides ‘ticks’ for the controller to change values over time Finally we set up animation controller as follows AnimationController controller;  @override void initState() { super.initState(); controller =  AnimationController(vsync: this, duration: Duration(seconds: 2)); }

Before initState() is the first function that runs when building a widget,We initialize our variables here. For the controller we pass in the vsync parameter which is given by the SingleTickerProviderStateMixin we added to the state class . We also have set the duration of the animation for 2 seconds.

Starting the animation:

To start the animation we can use the controller defined earlier as it controls all the animation attached to it . The simplest way to do it is controller.forward( ) and to reverse controller.reverse( ) . There are options like controller.repeat( ) which repeats the animation continuously and controller.fling( ) which runs the animation quickly ,regardless of the duration .

Then we have to listen to the values of the controller in initstate and setState( ) to rebuild the widgets using the value of the controller.

And we are done.