Flutter Development - Animation Core Class Tween

Tween inherits Animatable. In general, the value range of animation is (0.0,1.0), but for some animations such as translation value, transparency, color value, size value, etc., the value range of (0.0,1.0) is not applicable up. At this time, you can use Tween to specify the range. Code example:

final Tween tween = Tween(begin:0.0,end:100.0);

The Tween class has a generic type, so it doesn't have to be a double type. If you need to define a color change animation, you can use ColorTween to achieve it, the code is as follows:

final Tween colorTween = ColorTween(begin:Colors.red,end:Colors.bule);

During the execution of the animation, it is often necessary to obtain the state of the animation. But Tween does not store any state, you need to call the evaluate() method to get the value of the animation. Tween also provides animate() for passing in a controller object. The following is an animation of a zoom-in -> zoom out infinite loop implemented using Tween:

import 'package:flutter/material.dart';

class TweenPage extends StatefulWidget {
    
    
  final String title;
  const TweenPage({
    
    Key? key, required this.title}) : super(key: key);

  @override
  State<TweenPage> createState() => _TweenPageState();
}

class _TweenPageState extends State<TweenPage>
    with SingleTickerProviderStateMixin {
    
    
  Animation<double>? _animation;
  AnimationController? _animationController;

  @override
  void initState() {
    
    
    super.initState();
    _animationController =
        AnimationController(duration: const Duration(seconds: 2), vsync: this);
    _animation = Tween(begin: 0.0, end: 200.0).animate(_animationController!)
      ..addStatusListener((status) {
    
    
        if (status == AnimationStatus.completed) {
    
    
          _animationController!.reverse();
        } else if (status == AnimationStatus.dismissed) {
    
    
          _animationController!.forward();
        }
      })
      ..addListener(() {
    
    
        setState(() {
    
    });
      });
    _animationController!.forward();
  }

  @override
  void dispose() {
    
    
    _animationController!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SizedBox(
          height: _animation!.value,
          width: _animation!.value,
          child: const FlutterLogo(),
        ),
      ),
    );
  }
}

The above animation is linear, and the non-linear animation can be implemented with the Curve class.
First you need to create an interpolator, the code is as follows:

CurvedAnimation curvedAnimation = CurvedAnimation(parent:controller,curve:Curves.easeInOut);

Both CurvedAnimation and AnimationController belong to the Animation class. And through CurvedAnimation packaging, you can set Curves to the Tween.animate() method to achieve the purpose of setting its motion curve. Code example:

import 'package:flutter/material.dart';

class FreeFallPage extends StatefulWidget {
    
    
  final String title;
  const FreeFallPage({
    
    Key? key, required this.title}) : super(key: key);

  @override
  State<FreeFallPage> createState() => _FreeFallPageState();
}

class _FreeFallPageState extends State<FreeFallPage>
    with SingleTickerProviderStateMixin {
    
    
  Animation<double>? _animation;
  AnimationController? _animationController;

  @override
  void initState() {
    
    
    super.initState();
    _animationController =
        AnimationController(duration: const Duration(seconds: 5), vsync: this);
    CurvedAnimation curvedAnimation =
        CurvedAnimation(parent: _animationController!, curve: Curves.bounceOut);
    _animation = Tween(begin: 0.0, end: 600.0).animate(curvedAnimation)
      ..addListener(() {
    
    
        setState(() {
    
    });
      });
    _animationController!.forward();
  }

  @override
  void dispose() {
    
    
    _animationController!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: [
          Positioned(
              left: MediaQuery.of(context).size.width / 2,
              top: _animation!.value,
              child: Container(
                margin: const EdgeInsets.only(right: 10.0),
                width: 20.0,
                height: 20.0,
                decoration: const BoxDecoration(
                    color: Colors.blue, shape: BoxShape.rectangle),
              ))
        ],
      ),
    );
  }
}