View the directory –>

A lot of Tween’s are built into Flutter. Here are some of them:

ColorTween

You can set the color gradient, begin color, end color, intermediate transition.

  • Set the color transition, the initial color green, color brown, Tween colorTween = new colorTween (the begin: Colors. Green, end: Colors. Orange);
    • Evaluate (_controller) : colorTween.evaluate(_controller
    • Mode 2: After animate
      • Animation _animation
      • new ColorTween(begin: Colors.green, end: Colors.orange);
      • _animation = colorTween.animate(_controller);
      • color: _animation.value

The code is as follows:

import 'package:flutter/material.dart'; class Test10ColorTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test10ColorTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween colorTween = new ColorTween(begin: Colors.green, end: Colors.orange); Animation<Color> _animationColor; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 5000)); _animationColor = colorTween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("ColorTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 200, height: 200, margin: EdgeInsets.all(10), color: colorTween.evaluate(_controller), ), Container( width: 200, height: 200, margin: EdgeInsets.all(10), color: _animationColor.value, ), Text("ColorTween", style: TextStyle( fontSize: (), [(), (), (); } @override void dispose() { _controller.dispose(); super.dispose(); }}Copy the code
IntTween

When we say new Tween(), begin and end are double, and begin and end of IntTween are ints.

Tween sizeTween = new IntTween(begin: 0,end: 200);

print("${sizeTween.evaluate(_controller)}");
Copy the code
  • With evaluate, the printed value is all int.
  • All values obtained through animate. Value are ints.

The code is as follows:

import 'package:flutter/material.dart'; class Test09IntTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test09IntTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween intTween = new IntTween(begin: 0, end: 200); Animation<int> _animationInt; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000)); _animationInt = intTween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("IntTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: _animationInt.value.toDouble(), height: _animationInt.value.toDouble(), margin: EdgeInsets.all(10), color: Colors.black12, ), Text("IntTween,_animationInt.value=${_animationInt.value}", style: TextStyle( fontSize: (), [(), (), (); } @override void dispose() { _controller.dispose(); super.dispose(); }}Copy the code
SizeTween

The transition change based on Size is actually the change of two values within Size.

Tween sizeTween = new sizeTween (begin: Size(0.0,0.0),end: Size(100.0)); Animation<Size> animation = sizeTween.animate(_controller); Size size = animation.value;Copy the code
  • Animation Animation = sizetween.animate (_controller); Generics are the Size

Effect:

The code is as follows:

import 'package:flutter/material.dart'; class Test11SizeTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test11SizeTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween sizeTween = new sizeTween (begin: Size(0.0, 0.0), end: Size(100.0, 200.0)); Animation<Size> _animationSize; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 5000)); _animationSize = sizeTween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("SizeTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: _animationSize.value.width, height: _animationSize.value.height, margin: EdgeInsets.all(10), color: Colors.black12, ), Container( width: 300, child: Text("SizeTween.size.width=${_animationSize.value.width}", style: TextStyle( fontSize: 14, )), ), Container( width: 300, child: Text("SizeTween.size.height=${_animationSize.value.height}", style: TextStyle( fontSize: 14, )), ) ], ), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); }}Copy the code
RectTween

Transition changes based on Rect rectangles

Tween rectTween = new RectTween(begin: Rect.fromLTWH(0, 0, 0, 0),end: Rect.fromLTWH(100, 100, 100, 100));
Animation<Rect> animation = rectTween.animate(_controller);
Rect rect = animation.value;
Copy the code

Effect:

The code is as follows:

import 'package:flutter/material.dart'; class Test12RectTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test12RectTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween rectTween = new RectTween( begin: Rect.fromLTWH(0, 0, 0, 0), end: Rect.fromLTWH(100, 100, 100, 100)); Animation<Rect> _animationRect; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 5000)); _animationRect = rectTween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("RectTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 200, height: 200, margin: EdgeInsets.all(10), color: Colors.black12, child: CustomPaint( painter: _MyRectPainter(_animationRect), ), ), Text("RectTween", style: TextStyle( fontSize: 14, )), ], ), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); } } class _MyRectPainter extends CustomPainter { Animation<Rect> animation; _MyRectPainter(this.animation) : super(repaint: animation); @override void paint(Canvas canvas, Size size) { Paint paint = Paint() .. color = Colors.red .. strokeWidth = 1 .. style = PaintingStyle.stroke; canvas.drawRect(animation.value, paint); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return true; } void translateToCenter(Canvas canvas, Size size) { canvas.translate(size.width / 2, size.height / 2); }}Copy the code
StepTween

Each time the interpolated floor is returned, it changes from double to int.

Tween stepTween = new StepTween(begin: 0,end: 100);
Animation<int> animation = stepTween.animate(_controller);
int value = animation.value;
Copy the code

Effect:

The code is as follows:

import 'package:flutter/material.dart'; class Test13StepTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test13StepTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween stepTween = new StepTween(begin: 0, end: 100); Animation<int> _animationStep; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000)); _animationStep = stepTween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("StepTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 200, height: 200, margin: EdgeInsets.all(10), color: Colors.black12, child: CustomPaint( painter: _MyStepPainter(_animationStep), ), ), Text("StepTween.value=${_animationStep.value}", style: TextStyle( fontSize: (), [(), (), (); } @override void dispose() { _controller.dispose(); super.dispose(); } } class _MyStepPainter extends CustomPainter { Animation<int> animation; _MyStepPainter(this.animation) : super(repaint: animation); @override void paint(Canvas canvas, Size size) { Paint paint = Paint() .. color = Colors.red .. strokeWidth = 1 .. style = PaintingStyle.stroke; canvas.drawRect( Rect.fromLTWH( 0, 0, animation.value.toDouble(), animation.value.toDouble()), paint); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return true; } void translateToCenter(Canvas canvas, Size size) { canvas.translate(size.width / 2, size.height / 2); }}Copy the code
ConstantTween

Each time the value of an interpolated constant is returned, what type of value is passed in when it is created

Tween constantTween = new constantTween (100.0); Animation<int> animation = constantTween.animate(_controller); int value = animation.value;Copy the code

Effect:

The code is as follows:

import 'package:flutter/material.dart'; class Test14ConstantTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test14ConstantTween> with SingleTickerProviderStateMixin { AnimationController _controller;  Tween constantTween = new ConstantTween<String>("ConstantTween"); Animation<String> _animationConstant; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 5000)); _animationConstant = constantTween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("ConstantTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 200, height: 200, margin: EdgeInsets.all(10), color: Colors.black12, child: Center( child: Text(_animationConstant.value, style: TextStyle(fontSize: 14, color: Colors.red)), ), ), Text("ConstantTween", style: TextStyle( fontSize: (), [(), (), (); } @override void dispose() { _controller.dispose(); super.dispose(); }}Copy the code
CurveTween

Note that CurveTween extends Animatable, which is not a subclass of Tween. The _controller.value is converted with the given curve.

CurveTween curveTween = new CurveTween(curve:Curves.easeInToLinear);
Animation<double> animation = curveTween.animate(_controller);
double value = animation.value;
Copy the code
  • Animation. value The value is between 0 and 1

Effect:

The code is as follows:

import 'package:flutter/material.dart'; class Test15CurveTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test15CurveTween> with SingleTickerProviderStateMixin { AnimationController _controller; CurveTween curveTween = new CurveTween(curve: Curves.bounceInOut); Animation<double> _animationCurve; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000), ); _animationCurve = curveTween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("CurveTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 200, height: 200, margin: EdgeInsets.all(10), color: Colors.black12, child: CustomPaint( painter: _MyCurvePainter(_animationCurve), ), ), Container( width: 300, child: Text("CurveTween.value=${_animationCurve.value}", style: TextStyle( fontSize: 14, )), ) ], ), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); } } class _MyCurvePainter extends CustomPainter { Animation<double> animation; _MyCurvePainter(this.animation) : super(repaint: animation); @override void paint(Canvas canvas, Size size) { translateToCenter(canvas, size); Paint paint = Paint() .. color = Colors.red .. style = PaintingStyle.fill; canvas.drawCircle( Offset(animation.value * 100, animation.value * 100), 10, paint); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return true; } void translateToCenter(Canvas canvas, Size size) { canvas.translate(size.width / 2, size.height / 2); }}Copy the code
AlignmentTween

Transitions based on Alignment attributes, such as the child of a Container moving from Topleft to bottomRight.

Take a look at the effect:

The code is as follows:

import 'package:flutter/material.dart'; class Test16AlignmentTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test16AlignmentTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween _tween = new AlignmentTween(begin: Alignment.topLeft, end: Alignment.bottomRight); Animation<Alignment> _animation; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000), ); _animation = _tween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("AlignmentTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 400, height: 400, alignment: _animation.value, margin: EdgeInsets.all(10), color: Colors.black12, child: Container( width: 100, height: 100, color: Colors.orange, ), ), ], ), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); }}Copy the code
AlignmentGeometryTween

Similar to AlignmentTween. Effect:

The code is as follows:

import 'package:flutter/material.dart'; class Test17AlignmentGeometryTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test17AlignmentGeometryTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween _tween = new AlignmentGeometryTween( begin: AlignmentDirectional.topCenter, end: AlignmentDirectional.centerEnd); Animation<AlignmentGeometry> _animation; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000), ); _animation = _tween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("AlignmentGeometryTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 400, height: 400, margin: EdgeInsets.all(10), color: Colors.black12, alignment: _animation.value, child: Container( width: 100, height: 100, color: Colors.orange, ), ), ], ), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); }}Copy the code
BorderRadiusTween

Transitions based on the BorderRadius property.

The effect is as follows:

The code is as follows:

import 'package:flutter/material.dart'; class Test18BorderRadiusTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test18BorderRadiusTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween _tween = new BorderRadiusTween( begin: BorderRadius.circular(0), end: BorderRadius.circular(200)); Animation<BorderRadius> _animation; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000), ); _animation = _tween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("BorderRadiusTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 400, height: 400, margin: EdgeInsets.all(10), decoration: BoxDecoration(borderRadius: _animation.value,color: Colors.orangeAccent), ), ], ), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); }}Copy the code
BorderTween

Transition based on the Border attribute.

The effect is as follows:

The code is as follows:

import 'package:flutter/material.dart'; class Test19BorderTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test19BorderTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween _tween = new BorderTween( begin: Border(top: BorderSide(width: 0, color: Colors.red)), end: Border( top: BorderSide(width: 50, color: Colors.green), bottom: BorderSide(width: 50, color: Colors.blueAccent))); Animation<Border> _animation; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000), ); _animation = _tween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("BorderTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 400, height: 400, margin: EdgeInsets.all(10), decoration: BoxDecoration( border: _animation.value, color: Colors.orangeAccent), ), ], ), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); }}Copy the code
ShapeBorderTween

Transition based on the ShapeBorder property.

The effect is as follows:

The code is as follows:

import 'package:flutter/material.dart'; class Test20ShapeBorderTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test20ShapeBorderTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween _tween = new ShapeBorderTween( begin: RoundedRectangleBorder( side: BorderSide(width: 0, color: Colors.red), borderRadius: BorderRadius.circular(0)), end: RoundedRectangleBorder( side: BorderSide(width: 50, color: Colors.green), borderRadius: BorderRadius.circular(200))); Animation<ShapeBorder> _animation; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000), ); _animation = _tween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("ShapeBorderTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 400, height: 400, margin: EdgeInsets.all(10), decoration: ShapeDecoration(shape: _animation.value,color: Colors.orangeAccent), ), ], ), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); }}Copy the code
DecorationTween

Transitions based on Decoration properties.

The effect is as follows:

The code is as follows:

import 'package:flutter/material.dart'; class Test21DecorationTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test21DecorationTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween _tween = new DecorationTween( begin: BoxDecoration( color: Colors.red, // borderRadius: BorderRadius.circular(0), border: Border(top: BorderSide(color: Colors.red, width: 0)), // shape: BoxShape.rectangle, gradient: LinearGradient( colors: [Colors.red, Colors.green, Colors.blueAccent])), end: BoxDecoration( color: Colors.orangeAccent, // borderRadius: BorderRadius.circular(200), border: Border(top: BorderSide(color: Colors.black, width: 50)), // shape: BoxShape.circle, gradient: LinearGradient(colors: [ Colors.black12, Colors.blueAccent, Colors.yellowAccent ]))); Animation<Decoration> _animation; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000), ); _animation = _tween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("DecorationTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 400, height: 400, margin: EdgeInsets.all(10), decoration: _animation.value, ), ], ), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); }}Copy the code
BoxConstraintsTween

Transitions based on the BoxConstraints property.

The effect is as follows:

The code is as follows:

import 'package:flutter/material.dart'; class Test22BoxConstraintsTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test22BoxConstraintsTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween _tween = new BoxConstraintsTween( begin: BoxConstraints(maxWidth: 0, minHeight: 0), end: BoxConstraints(maxWidth: 200, minHeight: 200)); Animation<BoxConstraints> _animation; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000), ); _animation = _tween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("BoxConstraintsTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( margin: EdgeInsets.all(10), color: Colors.orangeAccent, constraints: _animation.value, ), ], ), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); }}Copy the code
EdgeInsetsTween

Transition based on properties such as padding or margin that require EdgeInsets control.

The effect is as follows:

The code is as follows:

import 'package:flutter/material.dart'; class Test23EdgeInsetsTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test23EdgeInsetsTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween _tween = new EdgeInsetsTween( begin: EdgeInsets.only(left: 0, top: 0), end: EdgeInsets.only(left: 100, top: 50)); Animation<EdgeInsets> _animation; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000), ); _animation = _tween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("EdgeInsetsTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 200, height: 200, padding: _animation.value, margin: EdgeInsets.all(10), color: Colors.orangeAccent, child: Text("pushing by padding"), ), ], ), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); }}Copy the code
EdgeInsetsGeometryTween

Transition based on attributes such as padding or margin that require EdgeInsetsGeometry control. EdgeInsetsGeometry is the parent of EdgeInsets. The effect is almost the same.

The effect is as follows:

The code is as follows:

import 'package:flutter/material.dart'; class Test24EdgeInsetsGeometryTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test24EdgeInsetsGeometryTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween _tween = new EdgeInsetsGeometryTween( begin: EdgeInsets.only(left: 0, top: 0), end: EdgeInsets.only(left: 100, top: 50)); Animation<EdgeInsetsGeometry> _animation; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000), ); _animation = _tween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("EdgeInsetsGeometryTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 200, height: 200, padding: _animation.value, margin: EdgeInsets.all(10), color: Colors.orangeAccent, child: Text("pushing by padding"), ), ], ), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); }}Copy the code
TextStyleTween

Based on the transition of the Style property of Text, all properties of TextStyle can be tweaked.

The effect is as follows:

The code is as follows:

import 'package:flutter/material.dart'; class Test25TextStyleTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test25TextStyleTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween _tween = new TextStyleTween( begin: TextStyle(color: Colors.red,fontSize: 10), end: TextStyle(color: Colors.blue,fontSize: 40)); Animation<TextStyle> _animation; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000), ); _animation = _tween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("TextStyleTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 200, height: 200, margin: EdgeInsets.all(10), color: Colors.orangeAccent, alignment: Alignment.center, child: Text("TextStyle changing",style: _animation.value,), ), ], ), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); }}Copy the code
Matrix4Tween

Based on the gradient of the fourth order matrix, take canvas’s Transform as an example.

Effect:

The code is as follows:

import 'package:flutter/material.dart'; class Test26Matrix4Tween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test26Matrix4Tween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween _tween = new Matrix4Tween(begin: Matrix4(1,0,0,0, 1, 0,0,1,0, 1,0,0,0, 1,), end: ,0,1,0,1,0,0,0,0,0 Matrix4 (1, 0, 0, 100,0,0,1, / / delay x translation 100)); Animation<Matrix4> _animation; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000), ); _animation = _tween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Matrix4Tween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 400, height: 400, margin: EdgeInsets.all(10), color: Colors.orangeAccent, alignment: Alignment.center, child: CustomPaint( size: The Size (200200), a painter: _MyRectPainter (_animation),),),),),),); } @override void dispose() { _controller.dispose(); super.dispose(); } } class _MyRectPainter extends CustomPainter { Animation<Matrix4> animation; _MyRectPainter(this.animation) : super(repaint: animation); @override void paint(Canvas canvas, Size size) { translateToCenter(canvas, size); Paint paint = Paint() .. color = Colors.red .. strokeWidth = 1 .. style = PaintingStyle.stroke; canvas.drawCircle(Offset.zero, 100, paint); canvas.transform(animation.value.storage); canvas.drawCircle(Offset.zero, 100, paint); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return true; } void translateToCenter(Canvas canvas, Size size) { canvas.translate(size.width / 2, size.height / 2); }}Copy the code
Test27ThemeDataTween

You can define the theme Tween. Effect:

Code:

import 'package:flutter/material.dart'; class Test27ThemeDataTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test27ThemeDataTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween _tween = new ThemeDataTween( begin: ThemeData(primaryColor: Colors.blue), end: ThemeData(primaryColor: Colors.green)); Animation<ThemeData> _animation; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000), ); _animation = _tween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Theme( data: _animation.value, child: Scaffold( appBar: AppBar( title: Text("ThemeDataTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 400, height: 400, margin: EdgeInsets.all(10), color: _animation.value.primaryColor, ), ], ), ), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); }}Copy the code
Test28RelativeRectTween

You can define the theme Tween. Effect:

Code:

import 'package:flutter/material.dart'; class Test28RelativeRectTween extends StatefulWidget { @override _State createState() => _State(); } class _State extends State<Test28RelativeRectTween> with SingleTickerProviderStateMixin { AnimationController _controller; Tween _tween = new RelativeRectTween( begin: RelativeRect.fromLTRB(0, 0, 0, 0), end: RelativeRect.fromLTRB(100, 100, 100, 100)); Animation<RelativeRect> _animation; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 6000), ); _animation = _tween.animate(_controller); _controller.addListener(() { setState(() {}); }); // animation starts _controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("RelativeRectTween"), centerTitle: true, ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( width: 400, height: 400, margin: EdgeInsets.all(10), color: Colors.orangeAccent, child: CustomPaint( painter: _MyRectPainter(_animation), ), ), ], ), ), ); } @override void dispose() { _controller.dispose(); super.dispose(); } } class _MyRectPainter extends CustomPainter { Animation<RelativeRect> animation; _MyRectPainter(this.animation) : super(repaint: animation); @override void paint(Canvas canvas, Size size) { Paint paint = Paint() .. color = Colors.red .. strokeWidth = 1 .. style = PaintingStyle.stroke; Rect rect = Rect.fromLTWH(0, 0, size.width,size.height); canvas.drawRect(animation.value.toRect(rect), paint); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { return true; } void translateToCenter(Canvas canvas, Size size) { canvas.translate(size.width / 2, size.height / 2); }}Copy the code
Tween summary

Flutter provides about twenty Tween’s, ranging from basic types to objects, but has one obvious feature:

  • Quantifiable. Even objects such as Decoration are quantifiable in terms of their property changes.
  • For a change of the same type, begin describes the initial status and end describes the end status

After trying so many Tween effects by hand, we can actually find that they are essentially encapsulation of the AnimationController interpolating [0,1] changes. We can also implement these effects ourselves, but we can use them more easily with flutter encapsulation.