Animation Concepts in Flutter

In this section we’re going to look at how to perform some basic animations in Flutter to help enhance our UI (User Interface).

The Flutter SDK provides you with some built-in animations which you can use to perform actions such as fading, sliding, and resizing.

The animation system in Flutter is based on typed Animation objects. Widgets can either incorporate these animations in their build functions directly by reading their current value and listening to their state changes or they can use the animations as the basis of more elaborate animations that they pass along to other widgets.

The Animation object is an abstract class which doesn’t know anything about the screen.

Many times the animation object is used as Animation<double> to change a numeric value (for use in fading for example), however it can also be used as Animation<Color> or Animation<Size> to control different properties of a widget.

An Animation object sequentially generates interpolated numbers between two values over a certain duration. The output of an Animation object might be linear, a curve, a step function, or any other mapping you can devise. Depending on how the Animation object is controlled, it could run in reverse, or even switch directions in the middle.

Curved­Animation

A Curved­Animation is used to provide a non-linear animation, one specifically following a curve. The type of curve is defined when you create it, as shown below:

animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);

Besides easeIn, you can also use the following curve types which can be found at https://api.flutter.dev/flutter/animation/Curves-class.html:

• bounceIn
• bounceOut
• decelerate
• ease
• easeIn
• easeInSine
• and more…

In addition to the ones that come prebuilt, you can build your own by extending the CurvedAnimation class if you wanted to.

AnimationController

AnimationController is a special Animation object that generates a new value whenever the hardware is ready for a new frame. By default, an AnimationController linearly produces the numbers from 0.0 to 1.0 during a given duration. For example, this code creates an Animation object, but does not start it running:

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

AnimationController derives from Animation<double>, so it can be used wherever an Animation object is needed.

The AnimationController has additional methods to control the animation. For example, you start an animation with the .forward() method. The generation of numbers is tied to the screen refresh, so typically 60 numbers are generated per second. This number may not be accurate based upon the items on the screen, or the age of the device that is being used.

After each number is generated, each Animation object calls the attached Listener objects.

Animation Concepts in Flutter was originally found on Access 2 Learn