Playground

You can code along with this lesson with this example on Dartpad:

Notes

To make things more interesting, the end argument of the Tween value passed to TweenAnimationBuilder can be animated.

TweenAnimationBuilder<double>(
  tween: Tween<double>(begin: 0.0, end: _hue),
  duration: Duration(milliseconds: 1500),
  builder: (context, hue, child) {
    final hsvColor = HSVColor.fromAHSV(1.0, hue, 1.0, 1.0);
    return Container(
      width: 200,
      height: 200,
      color: hsvColor.toColor(),
    );
  },
)

In this example, we do this in response to an input event, such as the user dragging the value of a slider that controls the hue component.

Slider.adaptive(
  value: _hue,
  min: 0,
  max: 360,
  onChanged: (newHue) => setState(() => _hue = newHue),
)

Additional notes

Flutter already knows how to interpolate values of the most common types (double, Offset, Color).

If you want to use TweenAnimationBuilder and interpolate your own types, you need to provide an interpolation function called lerp() which stands for "linear interpolation".

Here's how lerp() is implemented in the Color class:

• lerp method

You can use this as reference if you want to implement your own interpolation code.

Performance optimizations with TweenAnimationBuilder

When you work with TweenAnimationBuilder, you can improve the performance of your code by using the child argument.

This article explains why it is important and covers all the details:

• Flutter: Why do TweenAnimationBuilder and AnimatedBuilder have a child argument?