How do I animate Color using an AnimatedBuilder widget? Flutter

Viewed 319

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?
              ));
        });
  }
}
1 Answers
Related