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 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.
// Declaration of TweenrectAnimation = RectTween(begin: Rect.fromLTWH(0, 0, 100, 100), end: Rect.fromLTWH(450, 200, 100, 100));// Use of Tweendouble value = rectAnimation.transform(0.5);
Here,
Line 2: The
rectAnimationis aTweenobject 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 to0.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.5is 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();
}
}Explanation
Lines 3–6: The execution of the Flutter app begins from the
main()function.runApp()makes theWidgetthe root of thewidget tree A 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
MyAppis defined which extends thestatelessWidgetclass. It provides features such asScaffold(A basic layout to design applications), aCenterwidget (to center the child widgets), and aTweenAnimation().Lines 15–19: Here, we define the class named
TweenAnimationwhich extends theStatefulWidgetclass (A widget that changes state over time).Line 18:
createState()method creates an instance of the class namedTweenAnimationState.Lines 21: The state class
TweenAnimationStateextends theTweenAnimationclass which is created bySingleTickerProviderStateMixin. It is a mixin which is used to createTickerto control animations.Lines 23 & 30:
controlleris being declared and initialized to to thedurationof2seconds. So, the total time period for the animation to complete is2seconds.vsync.thismakes theanimationControllersynchronized. It is used to informcontrollerabout 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:
rectAnimationis being declared and initialized here. It takes thebeginandendof the tworectobjects. ThefromLTWH()method specifies the beginning and end coordinates and specifies the left, right, width, and height respectively. Theanimate()method is called to play therectTweenanimation.Line 29:
initStateis called only once to initialize the state.Lines 35–37:
buildis a method in thestateclass. It takes the objectBuildContextand returns aStackwidget. It containsAnimatedBuilderwhich is a widget that rebuilds itself each time thecontrolleris called (when the state of the animation changes).Line 40:
AnimatedBuilderwidget eventually returns aContainerwidget with the updated values of therectAnimationused to set thewidthandheightof the container. Thecoloris set tored.Line 42:
AnimatedBuilderreturns a positioning widget called thePositioned.fromRect()method sets the Left, Right, Width, and Height to the current value ofrectAnimation.colorof the square is set tored. 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 theControllerwhenever thestateobject is removed.
