Animations in Flutter

3 min readOct 3, 2020

Introduction

In This Blog, We Are Going To See How Animations Works in Flutter.

Well-designed animations make a UI feel more intuitive, contribute to the slick look and feel of a polished app, and improve the user experience. Flutter’s animation support makes it easy to implement a variety of animation types. Many widgets, especially Material widgets, come with the standard motion effects defined in their design spec, but it’s also possible to customize these effects.

Animation types

Generally, animations are either tween- or physics-based. The following sections explain what these terms mean, and point you to resources where you can learn more.

Tween animation

Short for in-betweening. In a tween animation, the beginning and ending points are defined, as well as a timeline, and a curve that defines the timing and speed of the transition. The framework calculates how to transition from the beginning point to the endpoint.

Animation

The primary building block of the animation system is the Animation class. Animation represents a value of a specific type that can change over the lifetime of the animation. Most widgets that perform an animation receive an Animation object as a parameter, from which they read the current value of the animation and to which they listen for changes to that value

AnimationController

To create an animation, first, create an AnimationController. As well as being an animation itself, and AnimationController lets you control the animation. For example, you can tell the controller to play the animation forward or stop the animation. You can also fling animations, which uses a physical simulation, such as a spring, to drive the animation.

Once you’ve created an animation controller, you can start building other animations based on it. For example, you can create a ReverseAnimation that mirrors the original animation but runs in the opposite direction (from 1.0 to 0.0). Similarly, you can create a CurvedAnimation whose value is adjusted by a Curve.

Tweens

To animate beyond the 0.0 to 1.0 interval, you can use a, Tween<T>which interpolates between its begin and end values. Many types have specific Tween subclasses that provide type-specific interpolation. For example, ColorTween interpolates between colors and RectTween interpolates between reacts. You can define your own interpolations by creating your own subclass and overriding its lerp function.

animation =Tween<double>(begin: 0.0, end: 6.28).animate(animationController);animationController.forward();//This will Initially start the animation after this we can check the status of animation using animation status listener.

Now add an Animation listener. to control the animation.