What is the ColorTween animation in Flutter?

Tween animation in Flutter includes creating an intermediate state between the two endpoints, a starting state and an ending state. If you are moving a widgetAn immutable (unable to be changed) description of the part of the user interface. from point A to point B, you can use the Tween animation for a smoother transition between two states.

How to define the `ColorTween`

Tween is a stateless object which generates a set of new values based on the specified start point, end point, and a cycle duration.

Given below is the syntax of defining a Tween.

Here,

Line 2: The colorAnimation is a Tween object which represents the start and end color of the object.
Line 5: The transform() method is called with the value set to 0.5. It determines the time period of one animation cycle.

Note:
The greater the duration value, the longer the animation will take to complete one cycle. The smaller the value, the faster the animation will complete one cycle.
Moreover, 0.5 is not the value to which the points are incremented. It is the time period for one cycle completion.

Code

Details on how to use the ColorTween animation along with the code is given below.

import 'package:flutter/material.dart';

void main() 
{
  runApp(MyApp());
}

class MyApp extends StatelessWidget 
{
  @override
  Widget build(BuildContext context) 
  {
    return MaterialApp(home: Scaffold(body: Center(child: TweenAnimation(),),),);
  }
}

class TweenAnimation extends StatefulWidget 
{
  @override
  TweenAnimationState createState() => TweenAnimationState();
}

class TweenAnimationState extends State<TweenAnimation> with SingleTickerProviderStateMixin 
{
  AnimationController controller;
  Animation<Color> colorAnimation;

  @override
  void initState() 
  {
    super.initState();
    controller = AnimationController(duration: const Duration(seconds: 2), vsync: this,)..repeat(reverse: true);
    colorAnimation = ColorTween(begin: Colors.red, end: Colors.purple,).animate(controller);
  }

  @override
  Widget build(BuildContext context) 
  {
    return AnimatedBuilder(animation: controller, builder: (context, child) 
    {
      return Container(width: 200, height: 200, color: colorAnimation.value,);
    },);
  }

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

ColorTween animation

Explanation

Line 3–6: The runApp() makes the Widget the root of the widget treeA tree that holds all your widgets within each other. It is how you structure your User Interface (UI)..
Lines 8–15: A new class named MyApp is defined which extends the statelessWidget class. MaterialApp provides features such as Scaffold (A basic layout to design applications), a Center widget (to center the child widgets), and a TweenAnimation().
Lines 17–21: Here, we define the class named TweenAnimation which extends the StatefulWidget class (A widget that changes state over time).
Line 20: createState() method creates an instance of the class named TweenAnimationState.
Lines 23: The state class TweenAnimationState extends the TweenAnimation class which is created by SingleTickerProviderStateMixin. It is a mixin which is used to create Ticker to control animations.
Line 25: controller is being declared and initialized to to the duration of 2 seconds. So, the total time period for the animation to complete is 2 seconds. vsync.this makes the animationController synchronized.
- It is used to inform controller about the screen updates to play animations accordingly. ..repeat(reverse: true) reverses the direction after the completion of each animation cycle. It causes the animation to repeat infinitely.
Line 26 & 33: colorAnimation is being declared and initialized with the start state of red color and an end state of purple color. The square changes its color from red to purple within the completion of each duration cycle. animate() is called to play the colorTween animation.
Line 31: initState is called only once to initialize the state.
Line 37: build is a method in the state class. It takes the object BuildContext and returns a widget.
Line 39–41: AnimatedBuilder widget listens to the controller animation and calls the builder. It eventually returns a Container widget with the updated
Line 41: The width and height of the square is set to 200 which remains constant over the duration. The color is set to colorAnimation.value which is initialized in line 33.
Lines 46–49: dispose() method is used to prevent any memory leaks. It cleans up the Controller whenever the state object is removed.

Learn more about Flutter

Free Resources

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments

What is the ColorTween animation in Flutter?

How to define the ColorTween

Code

Explanation

Learn more about Flutter

How to define the `ColorTween`