Using Animations in Flutter

In this blog, i will be demonstrating how you can create your own animations in flutter.

Below is a short explanation of Animation and Animation Controller

What is Animation?

An animation consists of a value (of type <T> ) together with a status. The status can be used to know whether the animation is completed, dismissed, etc. Animation value changes for given duration according to the Curve or Tween set by you. Then you can use these animation values in your widgets properties ( like width, height, etc ) to make your widgets animate.

What is Animation Controller?

It is basically a controller for your animation. You can play an animation [forward] or in [reverse], or [stop] an animation using animation controller. You can also provide duration of your animation in AnimationController class. Do not forget to dispose your animation controller after your use to avoid any memory leaks.

Now, i would be showing how to create your animations in Flutter in step-wise manner.

Step 1: Create a Stateful Widget for your animations.

Step 2: Create Animation and Animation Controller object.

Note: Animation Controller constructor has a property vsync and to enable that we have to extend our State Class with TickerProviderStateMixin or SingleTickerProviderStateMixin.

So our code will become:

Step 3: Now we define animation and animationController in initState() method in our Stateful Widget.

@override
void initState() {
super.initState();
animationController = AnimationController(vsync: this,
                      duration: Duration(seconds: 2));
animation = CurvedAnimation(parent: animationController,
             curve: Curves.fastOutSlowIn);
animationController.forward();
}

• In animationController, Animation Controller class constructor was used which took two parameters vsync and duration. Enable vsync as vsync is the [TickerProvider] for the current context and in duration specify the time how long you want your animation to run.
• Then in animation object, Curved Animation class constructor was used and there i linked my animation controller in parent property and to use a curved animation i used a fastOutSlowIn curve in curve property.
• animationcontroller.forward() will start the animation.

Step 4: Now animation controller will continuously produce values according to the curve for the provided duration. But the main motive is to use these values in order to animate our widgets.

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(title: Text("Animation App")),
  body: Center(
    child: Container(
      height: (animationController.value*100)+50,
      width: (animationController.value*100)+50,
      child: FlutterLogo(),
     ),  // Container
   ),  // Center
  ); // Scaffold
}

So in our build method i used a Center widget containing default Flutter Logo. The flutter logo has a size property and there i used animation controller values to vary the size of Flutter logo during animation duration.

** Now when you rebuild your app, you will notice there is no animation. Try to think what can be the reason??

Yes, you are right as we need two things:

• To make changes in our UI whenever there is change in state ( here animation.value), we need to use setState() method.
• And to constantly listen to animation values we need to add a Animation Listener for it.

Step 5: So again we have to do above tasks in initState() method.

animation.addListener( () {
setState(() 
{
  print(animationcontroller.value);});
});
animation.addStatusListener((status) {
if (status == AnimationStatus.completed) 
 animationController.reverse();
}
);
animationController.forward();

• animation.addListener() calls the listener every time the value of the animation changes. So use setState() method there so that every time the animation value changes your UI gets rebuild to show the changes. You can also print these values by using print function.
• animation.addStatusListener() calls the listener every time the status of the animation changes like completed, dismissed, etc. So with the help of this you can also perform some actions like repeat your animation, reverse, etc.

Step 6: So that’s it for animation part. One last thing but not least is to dispose the animation controller to avoid any memory leaks.

@override
void dispose() {
super.dispose();
animationController.dispose();
}

That’s it the animation would work now. If you have any difficulty, you can see the below complete code

Now you can use this class anywhere to show animation part. So the animation would look like this

So these were some basics of Flutter animation. Now i would suggest you to explore animations according to you. Also try out flutter animation widgets library.

Below is a short app with very few animations which i created using animation concepts and widgets.

Repository Link for above app is here.

So that’s it folks for this blog. Hope you liked it. See you in next blog. Happy coding .

LinkedIn Profile: https://www.linkedin.com/in/apeksh-agarwal-0543bb192/

Github Profile: https://github.com/Apeksh742