How to slow down AnimationController in Flutter - flutter

Question

I am just trying out flutter animations, and I know that the Animation controller needs vsync ( TickerProvider ) , so I used the SingleTickerProviertateMixin. Now I want to slow down this following animation.
class AnimatedGradientText extends StatefulWidget {
final String data;
final double size;
AnimatedGradientText(this.data, {this.size});
#override
_AnimatedGradientTextState createState() => _AnimatedGradientTextState();
}
class _AnimatedGradientTextState extends State<AnimatedGradientText> with SingleTickerProviderStateMixin {
List listOfColors = <Color>[
Colors.red[200],
Colors.blue[200],
Colors.green[200],
Colors.yellow[200],
// Colors.orange[200],
// Colors.teal[200],
// Colors.cyan[200],
// Colors.purple[200],
// Colors.brown[200],
// Colors.amber[200],
// Colors.pink[200],
];
AnimationController _controller;
void shift(){
Color color = listOfColors.removeAt(Random().nextInt(listOfColors.length));
listOfColors.add(color);
}
#override
void initState() {
_controller = AnimationController(vsync: this , duration: Duration(seconds: 5),upperBound: 10,lowerBound: 0);
_controller.forward(from: 0);
_controller.addListener((){
setState(() {
shift();
});
});
super.initState();
}
#override
void deactivate() {
_controller.dispose();
super.deactivate();
}
#override
Widget build(BuildContext context) {
return Text(
widget.data,
style: TextStyle(
fontSize: widget.size*10,
fontFamily: 'AudioWide',
foreground: Paint()..shader = LinearGradient(
colors: listOfColors
).createShader(Rect.fromLTWH(0.0, 0.0, 200.0, 70.0)),
),
);
}
}
Basically what I am trying to achieve with this is some text that has gradient and changes the gradient over time. But the animation is too fast that it doesnt interpolate smoothly.
Any suggestions regarding an easier way to achieve this will also be helpful. Thanks for your time !

Answer 1

As addListener call shift method every time when data is change, so we have to control is ourselves.
In Following code i add delay of one second to change color, you can play with await and change whatever you find best for you.
Following code will help you to understand more.
class AnimatedGradientText extends StatefulWidget {
final String data;
final double size;
AnimatedGradientText(this.data, {this.size});
#override
_AnimatedGradientTextState createState() => _AnimatedGradientTextState();
}
class _AnimatedGradientTextState extends State<AnimatedGradientText>
with SingleTickerProviderStateMixin {
List listOfColors = <Color>[
Colors.red[200],
Colors.blue[200],
Colors.green[200],
Colors.yellow[200],
// Colors.orange[200],
// Colors.teal[200],
// Colors.cyan[200],
// Colors.purple[200],
// Colors.brown[200],
// Colors.amber[200],
// Colors.pink[200],
];
AnimationController _controller;
bool canCall = true;
void shift() async {
await Future.delayed(Duration(seconds: 1));
Color color = listOfColors.removeAt(Random().nextInt(listOfColors.length));
listOfColors.add(color);
canCall = !canCall;
}
callme() {
if (canCall) {
canCall = !canCall;
shift();
}
}
#override
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 5),
upperBound: 10,
lowerBound: 0,
);
_controller.forward(from: 0);
_controller.addListener(() {
setState(() {
// shift();
callme();
});
});
super.initState();
}
#override
void deactivate() {
_controller.dispose();
super.deactivate();
}
#override
Widget build(BuildContext context) {
return Text(
widget.data,
style: TextStyle(
fontSize: widget.size * 10,
fontFamily: 'AudioWide',
foreground: Paint()
..shader = LinearGradient(colors: listOfColors)
.createShader(Rect.fromLTWH(0.0, 0.0, 200.0, 70.0)),
),
);
}
}

Answer 2

You can use a Tween to control how fast your slow you want your animation.
The code below shows you how to use a Tween that works perfectly well.
Check the code below, it works well.
Tween<Int>(
begin:0,
end: 255,
);
I hope this helps.

Answer 3

Expose timeDilation property and set it to higher value to slowdown
import 'package:flutter/scheduler.dart' show timeDilation;
timeDilation = 2.0;
I came across this on StackOverFlow some time back