如何获取小部件的当前颜色属性？答案

【问题标题】：How to get current color property of a widget?如何获取小部件的当前颜色属性？
【发布时间】：2021-11-18 00:14:45
【问题描述】：

我正在尝试构建一个颜色不断变化的小部件。例如，它从白色开始，随着时间的推移慢慢地使颜色变为红色。然后，当用户按下按钮时，我需要获取它的颜色。现在，我正在尝试通过使用 AnimatedContainer 来实现这一目标。它做了我想要的确切动画。但是，我无法在特定时间获得颜色属性（例如按下按钮）。是否可以使用标准的 Flutter 小部件来做到这一点？或者，有什么 Flutter 包可以满足这个需求吗？

【问题讨论】：

您是否尝试过分配一个唯一键和 find.byKey() 小部件来查询小部件属性？不确定哪个属性会保存当前颜色，但您可以在调试器中检查小部件以查看可查询的内容。
是的，我试过了。大多数属性（大小，位置...）都可以使用它来获取，但我无法获取颜色。
您希望这个过程在测试过程中还是在您的应用程序中？
@Abbasihsn 在我的应用程序中

标签： flutter animation colors

【解决方案1】：

您可以创建自己的ColorAnimation 小部件。 ImplicitlyAnimatedWidget（AnimatedContainer 使用它）您可以在变量更改颜色时为小部件设置动画。您需要使用ColorTween 进行转换。

有了这个，你可以在动画的状态中创建 getter 来给出当前的Color。

这是一个示例实现：

class TestColor extends ImplicitlyAnimatedWidget {
  const TestColor({
    Key? key,
    this.onTap,
    this.color,
    Curve curve = Curves.linear,
    required Duration duration,
    VoidCallback? onEnd,
  })  : super(key: key, curve: curve, duration: duration, onEnd: onEnd);

  final Color? color;
  final void Function(Color? color)? onTap;

  @override
  AnimatedWidgetBaseState<TestColor> createState() =>
      _TestColorState();
}

class _TestColorState
    extends AnimatedWidgetBaseState<TestColor> {
  ColorTween? _color;
  Color? get color => _color?.evaluate(animation);

  @override
  void forEachTween(TweenVisitor<dynamic> visitor) {
    _color = visitor(_color, widget.color,
            (dynamic value) => ColorTween(begin: value as Color))
        as ColorTween?;
  }

  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = this.animation;
    final Color? color = _color?.evaluate(animation);
    return GestureDetector(
      onTap: () => widget.onTap?.call(color),
      child: Container(
        color: color,
        width: 100,
        height: 100,
      ),
    );
  }
}

有了这个，你可以得到颜色：

//The key
final GlobalKey<_TestColorState> color = GlobalKey();

//The widget
TestColor(
  key: color,
  duration: const Duration(seconds: 2),
  color: Colors.red,
)

//How to get the current color
color.currentState?.color;

【讨论】：