Flutterexperts

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

https://gist.github.com/flutter-devs/e08e375c0684b571ecbfb7bb3dbad622#file-home-dart

• 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.

https://gist.github.com/flutter-devs/f69c3fec53107e7dd96f606d09072729#file-home-dart

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>

https://gist.github.com/flutter-devs/33df4af5be42b43b15ba9edd01501e0f#file-home-dart

CurvedAnimation

CurvedAnimation is the type of animation which applies curve to the animation. It provides many different types of curves such as easeIn, fastOutSlowIn, easeOut, bounceIn, and many more. Animation applied through CurvedAnimation follows non-linear curve.

To have a better visual look of different types of curves, head over to this
link

https://gist.github.com/flutter-devs/162d4585c70e71b7db7d78ac0800654f#file-home-dart

First, initialise the AnimationController and after specifying the range of animation with the help of Tween, then specify the CurvedAnimation. CurvedAnimation expects two parameters which are required and one optional parameter —

• curve: It denotes the curve that is to be followed by animation while the particular widget is animating
• parent: It links the AnimationController with the Animation
• reverseCurve: It denotes the curve that is to be used in reverse direction

---

We got something wrong? Mention it in the comments. We would love to improve.

If you learnt even a thing or two, clap your hands 👏 as many times as you can to show your support!

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---