I am trying to animate color using the AnimatedBuilder widget in Flutter.
I can use this builder widget to animate scale, translate, rotate by returning a Transform object. But I am lost to as how I can do this to animate color.
Note, I can animate color using the AnimatedContainer widget but I want to be able to do more complex animation using Intervals (e.g. in this case, fade in a color, wait a period of time, then fade back out).
Is this possible?
Thanks!
class _AnimatedColorState extends State<AnimatedColor>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<Color?> _animFadeIn, _animFadeOut;
@override
void initState() {
_controller = AnimationController(
duration: Duration(milliseconds: 1000),
vsync: this,
);
_animFadeIn = ColorTween(begin: Colors.pinkAccent, end: Colors.green)
.animate(CurvedAnimation(
parent: _controller,
curve: Interval(0, 0.20, curve: Curves.fastOutSlowIn)));
_animFadeOut = ColorTween(begin: Colors.green, end: Colors.pinkAccent)
.animate(CurvedAnimation(
parent: _controller,
curve: Interval(0.80, 1.0, curve: Curves.fastOutSlowIn)));
_controller.forward();
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Container(
height: 300,
width: 100,
decoration: BoxDecoration(
color: // animate color here?
));
});
}
}