How to animate the color of a RaisedButton in Flutter?

Question

I have a RaisedButton. I want to animate it's color from green to red, and vice versa, every time the user clicks it.

How this could be done?

Answer 1

class ChangeRaisedButtonColor extends StatefulWidget {
  @override
  ChangeRaisedButtonColorState createState() => ChangeRaisedButtonColorState();
}

class ChangeRaisedButtonColorState extends State<ChangeRaisedButtonColor>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _colorTween;

  @override
  void initState() {
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    _colorTween = ColorTween(begin: Colors.red, end: Colors.green)
        .animate(_animationController);

    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
    _animationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _colorTween,
      builder: (context, child) => RaisedButton(
            child: Text("Change my color"),
            color: _colorTween.value,
            onPressed: () {
              if (_animationController.status == AnimationStatus.completed) {
                _animationController.reverse();
              } else {
                _animationController.forward();
              }
            },
          ),
    );
  }
}

Answer 2

You can use AnimatedContainer as raiseButton child . and when color changed it will be animated!

RaisedButton(
        onPressed: null,
        padding: EdgeInsets.all(0),
        child: AnimatedContainer(
          color: pageIndex == 1 ? Color(0xFF4B4B4B) : Color(0xFFD8D8D8),
          duration: Duration(milliseconds: 300),
        ),
      )

and its just a container so it can have child like text..

Answer 3

This solution is based on Vahab Ghadiri 's answer but i've applied some modifications around it to have a child, so it becomes easier to plug and play:

bool _isRed = true;
static const int ANIMATION_DURATION = 500;
static const int CIRCLE_RADIUS = 25;

AnimatedContainer(
  // AnimatedContainer is used to fade a circle when color is changed
  duration: Duration(milliseconds: ANIMATION_DURATION),
  decoration: BoxDecoration(
    color: _isRed ? Colors.red : Colors.yellow,
    borderRadius: BorderRadius.all(
        Radius.circular(CIRCLE_RADIUS)
    ),
  ),
  child: RaisedButton(
    child: Container(
      width: 50,
      height: 50,
    ),
  ),
// feel free to replace RaisedButton(..) with your preferred widget!
),

Then all what you need to animate color is to change the variable _isRed like this:

setState(() {
  _isRed = false; // or _isRed = false; (depends on your logic)
});