We Will Be At Dubai GITEX 2022 - World’s Largest Tech Conference

Book Meeting
blog-asset-missing

How to Create 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.

blog-asset-missing

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.

blog-asset-missing
Stack :

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.

blog-asset-missing

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:(), )

Transform :

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.

blog-asset-missing

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.

blog-asset-missing

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.

blog-asset-missing

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, ), ),

blog-asset-missing

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

blog-asset-missing

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.