Difference between Animation Tween and Animation Controlller

Question

In some Flutter animation tutorials, some uses a Tween and an Animation object. Some uses AnimationController only. Both code below seems to output the same result. So when do we use a Tween with animation and when do we use AnimationController only?

With Tween and animation

import 'dart:core';
import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _State createState() {
    return _State();
  }
}

class _State extends State<Test> with TickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;
   bool faded = true;
  @override
  void initState() {
    super.initState();
    _animationController = new AnimationController(
        value:0.0,
        vsync: this,
        upperBound: 1.0,
        lowerBound: 0.0,
      duration: new Duration(seconds:1),
    );
    _animation = Tween(begin: 0.0, end: 1.0).animate(_animationController);

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        elevation: 0.5,
        title: new Text(
          "Testing views",
          style: Theme.of(context).textTheme.title,
        ),
      ),
      body: _buildBodyAnimationTest(),
//      body:  _buildTuto(),
    );
  }
  Widget _buildBodyAnimationTest(){
    return FadeTransition(
      opacity: _animation, //here is the difference
      child: InkWell(
        onTap: (){
          if(faded){
            faded = false;
            _animationController.reverse();
          }else{
            faded = true;
            _animationController.forward();
          }
        },
        child: new Container(
          color: Colors.red,
        ),
      ),
    );
  }
}

Without Tween and Animation

import 'dart:core';
import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _State createState() {
    return _State();
  }
}

class _State extends State<Test> with TickerProviderStateMixin {
  AnimationController _animationController;
   bool faded = true;
  @override
  void initState() {
    super.initState();
    _animationController = new AnimationController(
        value:0.0,
        vsync: this,
        upperBound: 1.0,
        lowerBound: 0.0,
      duration: new Duration(seconds:1),
    );

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        elevation: 0.5,
        title: new Text(
          "Testing views",
          style: Theme.of(context).textTheme.title,
        ),
      ),
      body: _buildBodyAnimationTest(),
//      body:  _buildTuto(),
    );
  }
  Widget _buildBodyAnimationTest(){
    return FadeTransition(
      opacity: _animationController, //here is the difference
      child: InkWell(
        onTap: (){
          if(faded){
            faded = false;
            _animationController.reverse();
          }else{
            faded = true;
            _animationController.forward();
          }
        },
        child: new Container(
          color: Colors.red,
        ),
      ),
    );
  }
}

Solution 1

Tweens are objects used to transform the output of an Animation (such as AnimationController).

With AnimationController, you typically have a 0-1 floating value. But you rarely want that. Tweens allows to map that 0-1 to something more concrete such as red to blue, left to right, ...

Solution 2

Background is my tween sequence color.

Animatable<Color> background = TweenSequence<Color>(
      [
        TweenSequenceItem(
          weight: 1.0,
          tween: ColorTween(
            begin: colors[_Substance.dayEndBackground],
            end: colors[_Substance.dayStartBackground],
          ),
        ),
        TweenSequenceItem(
          weight: 1.0,
          tween: ColorTween(
            begin: colors[_Substance.dayStartBackground],
            end: colors[_Substance.dayEndBackground],
          ),
        ),
      ],
    );

This is my controller defined in initState() and updated in every one second:

bgUpdateController = AnimationController(
      value: _currentDateTime.hour / 24,
      upperBound: 1,
      lowerBound: 0,
      duration: const Duration(hours: 24),
      vsync: this,
    )..repeat();

I have used the above background and controller as AnimatedBuilder like below:

AnimatedBuilder(
      animation: bgUpdateController,
      builder: (context, child) {
        return Scaffold(
          backgroundColor: background
              .chain(
                CurveTween(curve: Curves.easeInOutCirc),
              )
              .evaluate(
                AlwaysStoppedAnimation(bgUpdateController.value),
              ),
              ...

and the result of my code is:

Conclusion

AnimationController is for how long the animation would be and how to control from time, upper and lower boundary, how to control data with time, length, sequence, etc. while AnimationTween is for the range of animation with time, colour, range, sequence, etc as long the animation would be while.

Comments

[TSR]

_animationController = new AnimationController( vsync: this, lowerBound: 0.0, value: 20.0, upperBound: 500.0, duration: new Duration(seconds: 1), ); _animationController.animateTo(300.0); I have seen that we can have values beyond 0-1 with animationController

[Rémi Rousselet]

Yeah but tweens can map to values others than double.