Animations in Flutter

4 min readMar 20, 2022

In every mobile application, the animation is a time-consuming process. Despite its intricacy, animation elevates the user experience and allows for more intricate user interaction. Animation has become a vital feature of modern mobile applications due to its richness. Flutter acknowledges the value of animation and provides a simple and clear framework for creating a variety of animations.

Animation is the technique of displaying a succession of images or pictures in a given order for a set amount of time to create the illusion of movement. The following are the most crucial aspects of the animation:

There are two separate values in animation: the start value and the end value. The animation begins with the Start value and progresses through a succession of intermediate values before concluding with the End values. To animate a widget to fade away, for example, the initial value is full opacity and the final value is zero opacity.
The intermediate values can be specified and can be linear or non-linear (curve). Recognize that the animation operates in the manner in which it is set up. The animation has a different vibe in each setup. The fading of a widget, for example, will be linear, whereas the bouncing of a ball will be non-linear.
The animation’s speed (slowness or fastness) is affected by the time of the animation process.
The capacity to control the animation process, such as starting, halting, repeating the animation a certain number of times, reversing the animation process, and so on.
The animation technology in Flutter does not perform any real animation. Instead, it merely gives the values needed to generate the images at each frame.

Animation Based Classes

The flutter animation system is based on Animation objects. The core animation classes and their usage are as follows −

Animation:

Generates interpolated values between two numbers over a certain duration. The most common Animation classes are −

Animation<double> − interpolate values between two decimal number
Animation<Color> − interpolate colors between two color
Animation<Size> − interpolate sizes between two size
AnimationController − Special Animation object to control the animation itself. It generates new values whenever the application is ready for a new frame. It supports linear based animation and the value starts from 0.0 to 1.0

controller = AnimationController(duration: const Duration(seconds: 2), vsync: this);

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

CurvedAnimation

AnimationController is similar to AnimationController, except it also enables non-linear animation. As shown below, CurvedAnimation can be used in conjunction with Animation object —

controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); 
animation = CurvedAnimation(parent: controller, curve: Curves.easeIn)

Tween<T>

This class is derived from Animatable<T> and is used to produce numbers between any two numbers that are not 0 and 1. It can be used in conjunction with an Animation object by calling the animate method and supplying the Animation object as a parameter.

AnimationController controller = AnimationController( 
   duration: const Duration(milliseconds: 1000), 
vsync: this); Animation<int> customTween = IntTween(
   begin: 0, end: 255).animate(controller);

Tween can also be used along with CurvedAnimation as below −

AnimationController controller = AnimationController(
   duration: const Duration(milliseconds: 500), vsync: this); 
final Animation curve = CurvedAnimation(parent: controller, curve: Curves.easeOut); 
Animation<int> customTween = IntTween(begin: 0, end: 255).animate(curve);

Here, the controller is the actual animation controller. curve provides the type of non-linearity and the customTween provides a custom range from 0 to 255.

Workflow of the Flutter Animation

In the StatefulWidget’s initState, define and start the animation controller.
To update the state of the widget, add an animation-based listener, addListener. To avoid this step, use built-in widgets such as AnimatedWidget and AnimatedBuilder. Both widgets take Animation objects and retrieve the animation’s current values.
Get the animation values during the widget’s construction and use them instead of the original value for width, height, or any other relevant property.

//Step 1
AnimationController(duration: const Duration(seconds: 2), vsync: this); 
animation = Tween<double>(begin: 0, end: 300).animate(controller); 
controller.forward();//Step 2
animation = Tween<double>(begin: 0, end: 300).animate(controller) ..addListener(() {
   setState(() { 
      // The state that has changed here is the animation object’s value. 
   }); 
});//widget
child: Container( 
   height: animation.value, 
   width: animation.value, 
   child: <Widget>, 
)

Let's build a flutter app

Build a sample flutter app
Add 5–6 sample images and add them to pubspec.yaml like this:

flutter: 
   assets: 
   - assets/appimages/floppy.png 
   - assets/appimages/iphone.png 
   - assets/appimages/laptop.png 
   - assets/appimages/pendrive.png 
   - assets/appimages/pixel.png 
   - assets/appimages/tablet.png

Replace code in main.dart with this

This is what your app looks like:

That’s it for today! Do subscribe to our email updates to hear more from us ❤️