flutter - 在颤动中旋转容器动画中的颜色

Question

我在我的原始代码中提取了下面的代码，这有点长。

import 'package:flutter/material.dart';

import 'cubeRotate.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rotating boxes',
      home: MyHomePage(title: 'Rotating boxes'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> animals = [
    'dog',
    'cat',
    'mouse',
    'snake',
    'rabbit',
    'pig'
  ];
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:  Container(
          width: 500.0,
          height: 500.00,
      child: Wrap(
        children: [
          CubeRotate(name:animals[0], start: 0, end: 0.2),
          CubeRotate(name:animals[1], start:0.2, end:0.4),
          CubeRotate(name:animals[2], start:0.4, end:0.6),
          CubeRotate(name:animals[3], start:0.6, end:0.8),
          CubeRotate(name:animals[4], start:0.8, end:0.9),
          CubeRotate(name:animals[5], start:0.9, end:1.0),
        ],
      ),
    ),
    );
  }
}

和另一个飞镖文件

import 'package:flutter/material.dart';

class CubeRotate extends StatefulWidget {
  @override
  CubeRotate({Key key, @required this.name,
    @required this.start,
    @required this.end}): super(key: key);

  String name;
  double start;
  double end;

  _CubeRotateState createState() => _CubeRotateState();
}

class _CubeRotateState extends State<CubeRotate> with TickerProviderStateMixin{
  AnimationController controller;
  Animation animation;

  @override
  initState() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 10),
    );

    Tween _colorTween1 = new ColorTween(
      begin: Colors.white,
      end: Colors.blue,
    );

    Tween _colorTween2 = new ColorTween(
      begin: Colors.blue,
      end: Colors.white,
    );

    animation = TweenSequence(
        <TweenSequenceItem> [
          TweenSequenceItem(
            tween: _colorTween1.chain(CurveTween(curve: Interval(widget.start, widget.end))),
            weight: 20,
          ),
          TweenSequenceItem(
            tween: _colorTween2.chain(CurveTween(curve: Interval(widget.start, widget.end))),
            weight: 20,
          ),
        ]
    ).animate(controller);

    controller.forward();

    controller.addListener(() {
      setState(() {});
    });

    controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        print(widget.name + ' controller end.');
        controller.reverse();
        controller.reset();
        controller.forward();
      }
    });

    super.initState();

  }

  @override
  dispose() {
    controller.dispose();
    super.dispose();
  }

  double getSize() {
    if (MediaQuery.of(context).orientation == Orientation.portrait) {
      return MediaQuery.of(context).size.width - 120;
    } else {
      return MediaQuery.of(context).size.height - 120;
    }
  }

  @override
  Widget build(BuildContext context) {
    double _width = getSize() / 2;
    double _height = getSize() / 3;
    return Container(
      width: _width,
      height: _height,
      child: Card(
        color: animation.value,
        child: Center(
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Text(
              widget.name,
              style: TextStyle(
                fontSize: 20.0,
                color: Colors.black,
                fontWeight: FontWeight.bold,
              ),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
  }
}

这给了我这个动画

我想要的动画是每个容器的旋转颜色，比如狗是蓝色的，其他的是白色的，猫是蓝色的，其余的是白色的，等等。我对我的代码进行了很多修改，比如补间序列、反转和重置，但仍然不会做我想做的事情。我相信这对你们大多数人来说只是一个简短的解决方案。我想知道我在这里做错了什么？谢谢你。