What is the SizeTween 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 the two states.

How to define the `SizeTween`

Tween is a statelessA widget whose state cannot be changed during the runtime of the application. object which generates a set of new values based on the specified start point, end point, and a cycleThe time that an animation takes to complete one cycle. duration.

Given below is the syntax of defining a Tween.

Here,

Line 2: The sizeAnimation is a Tween object which represents the start and end size 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 SizeTween 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<double> sizeAnimation;

  @override
  void initState() 
  {
    super.initState();
    controller = AnimationController(duration: const Duration(seconds: 2), vsync: this,)..repeat(reverse: true);
    sizeAnimation = Tween<double>(begin: 200, end: 50,).animate(controller);
  }

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

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

SizeTween animation

Explanation

Lines 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–51: The state class TweenAnimationState extends the TweenAnimation class which is created by SingleTickerProviderStateMixin. It is a mixin which is used to create the Ticker to control animations.
Lines 25–26: An instance variable AnimationController is declared to control the animation duration. sizeAnimation is declared to control the size of the object and it has a value of double. The square will change its size from 200 to 50 during each animation cycle as initialized in line 33.
Line 31: initState is called only once to initialize the state.
Line 32: The controller animation is initialized to to the duration of 2 seconds. 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 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 values of sizeAnimation used to set the width and height of the container. The color is set to red.
Line 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

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments

What is the SizeTween animation in Flutter?

How to define the SizeTween

Code

Explanation

Learn more about Flutter

How to define the `SizeTween`