What is the RectTween 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 `RectTween`

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 rectAnimation is a Tween object which represents the start and end coordinates along with the position 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 RectTween 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: TweenAnimation(),),);
  }
}

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

class TweenAnimationState extends State<TweenAnimation> with SingleTickerProviderStateMixin 
{
  AnimationController controller;
  Animation<Rect> rectAnimation;

  @override
  void initState() 
  {
    super.initState();
    controller = AnimationController(duration: const Duration(seconds: 5), vsync: this,)..repeat();
    rectAnimation = RectTween(begin: Rect.fromLTWH(0, 0, 100, 100), end: Rect.fromLTWH(450, 200, 100, 100),).animate(controller);
  }

  @override
  Widget build(BuildContext context) 
  {
    return Stack(
      children: 
      [
        AnimatedBuilder(animation: controller, builder: (context, child) 
        {
            return Positioned.fromRect(rect: rectAnimation.value, child: Container(color: Colors.red,),);
        },),
      ],);
  }
  @override
  void dispose() 
  {
    controller.dispose();
    super.dispose();
  }
}

RectTween animation

Explanation

Lines 3–6: The execution of the Flutter app begins from the main() function. 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. It provides features such as Scaffold (A basic layout to design applications), a Center widget (to center the child widgets), and a TweenAnimation().
Lines 15–19: Here, we define the class named TweenAnimation which extends the StatefulWidget class (A widget that changes state over time).
Line 18: createState() method creates an instance of the class named TweenAnimationState.
Lines 21: 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.
Lines 23 & 30: 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.
Lines 24 & 31: rectAnimation is being declared and initialized here. It takes the begin and end of the two rect objects. The fromLTWH() method specifies the beginning and end coordinates and specifies the left, right, width, and height respectively. The animate() method is called to play the rectTween animation.
Line 29: initState is called only once to initialize the state.
Lines 35–37: build is a method in the state class. It takes the object BuildContext and returns a Stack widget. It contains AnimatedBuilder which is a widget that rebuilds itself each time the controller is called (when the state of the animation changes).
Line 40: AnimatedBuilder widget eventually returns a Container widget with the updated values of the rectAnimation used to set the width and height of the container. The color is set to red.
Line 42: AnimatedBuilder returns a positioning widget called the Positioned. fromRect() method sets the Left, Right, Width, and Height to the current value of rectAnimation. color of the square is set to red. As result, the square will changes it position from one place to the other based on the defined coordinates.
Lines 47–50: 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 RectTween animation in Flutter?

How to define the RectTween

Code

Explanation

Learn more about Flutter

How to define the `RectTween`