Rotating color in containers animation in flutter - flutter

Question

I have extracted the code below on my original code which is a bit long.
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),
],
),
),
);
}
}
and another dart file
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,
),
),
),
),
);
}
}
that gives me this animation
The animation I would like to happen is a rotation colour to each containers like dog is blue and others are white, cat is blue and the rest are white and so on. I did a lot of revisions on my code like sequence tween and reverse and reset but still won't do what I would like to happen. I am sure this is just a short solution for most of you. I would like to know what am I doing wrong here? Thank you.