2020-05-21-multicolor-tweening-in-flutter_rainbow-lerp.dart

class _RainbowBoxState extends State<RainbowBox>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _anim;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 5),
      vsync: this,
    )..forward()..repeat();
    _anim = bgValue.animate(_controller); 
  }

  // animate a double from 0 to 10
  Animatable<double> bgValue = Tween<double>(begin: 0.0, end: 10.0);

  // build a rainbow spectrum that blends across the same numerical domain
  Rainbow rb = Rainbow(rangeStart: 0.0, rangeEnd: 10.0, spectrum: [
    Colors.red,
    Colors.blue,
    Colors.green,
    Colors.yellow,
    Colors.red,
  ]);

  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Container(
              padding: EdgeInsets.all(24.0),
              decoration: BoxDecoration(color: rb[_anim.value]),  // lerp for background color
              child: Text('Rainbow'),
                style: TextStyle(color: rb[(_anim.value - 2) % 10]), //shift one color backward
              );
        });
  }
}

// dispose() omitted
}