flutter - 如何使用 setState 更改 ColorTween 开始或结束颜色

Question

这是我的测验应用程序的小部件。测验选项按钮。无论答案是真是假，我都希望它闪烁绿色或红色。但它不起作用。我尝试了不同的东西，但没有成功。请帮我。

   import 'package:flutter/material.dart';

class TestButton extends StatefulWidget {
  TestButton({this.text, this.color, this.onPressed});
  final Function onPressed;
  final Color color;
  final String text;

  @override
  _TestButtonState createState() => _TestButtonState();
}

class _TestButtonState extends State<TestButton> with TickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;

  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 400));

    _animation = ColorTween(begin: Colors.transparent, end: widget.color)
        .animate(CurvedAnimation(curve: Curves.decelerate, parent: _animationController))
          ..addListener(() {
            setState(() {   
            });
          });

    _animationController.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _animationController.reverse();
      } else if (status == AnimationStatus.dismissed) {
        _animationController.forward();
      }
    });
    _animationController.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;

    return SizedBox(
      width: width / 1.3,
      child: InkWell(
        borderRadius: BorderRadius.circular(30),
        onTap: widget.onPressed,
        child: Container(
          child: Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(width / 20),
            decoration: BoxDecoration(
                color: _animation.value,
                border: Border.all(color: Colors.white38),
                borderRadius: BorderRadius.circular(20)),
            child: Text(
              widget.text,
              style: TextStyle(fontSize: 16, fontFamily: "Fondamento"),
            ),
          ),
        ),
      ),
    );
  }
}

这就是按钮的用法。我正在应用 sesState，但它没有意义。问题是，动画工作但 setState 不影响 ColorTween 中的颜色值

TestButton(
              text: question.optionA,
              color: colorA,//Colors.transparent
              onPressed: () {
                if (canTap) {
                  canTap = false;
                  if (question.answer == 1) {
                    setState(() {
                      colorA = Colors.green;
                    });
                  } else {
                    setState(() {
                      colorA = Colors.red;
                    });
                  }
                }
              },
            ),

标签： flutteranimation

Answer 1

删除这部分：

          ..addListener(() {
            setState(() {   
            });
          });

并像这样使用 AnimatedBuilder：

    return SizedBox(
      width: width / 1.3,
      child: InkWell(
        borderRadius: BorderRadius.circular(30),
        onTap: widget.onPressed,
        child: Container(
          child: AnimatedBuilder(
            animation: _animationController,
            builder: (_, __) => Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(width / 20),
              decoration: BoxDecoration(
                color: _animationController.value,
                border: Border.all(color: Colors.white38),
                borderRadius: BorderRadius.circular(20)),
              child: Text(
                widget.text,
                style: TextStyle(fontSize: 16, fontFamily: "Fondamento"),
              ),
            )
          ),
        ),
      ),
    );