flutter - Flutter/Dart：如何从 Colorgradient 获得单色？

Question

我正在尝试构建一个小部件，随着时间的推移，它的背景颜色从绿色变为红色，但以流畅的方式。非常类似于渐变背景：

但不是固定的渐变，而是一开始的全绿色背景，随着时间的倒计时，背景应该慢慢过渡到黄色，然后是橙色，最后是红色。

我希望颜色每 10 毫秒更新一次，所以这不是突然的变化。我正在使用计时器处理更改，该计时器计算相对于开始时间已经过去了多少时间并相应地更新颜色。

现在 - 有什么办法可以从类似渐变的对象中获得具体的颜色？就像我可以在特定点（这是 time_passed/max_time 的一部分）提取渐变的颜色以将其用作完整背景？或者我应该实际使用颜色代码并每 10 毫秒增加一次颜色代码的值？这似乎不是很优雅

标签： flutterdartcolorswidgetgradient

Answer 1

好的，我实际上找到了两个解决方案：

1. 使用 Color.lerp(color a, color b, double p) 函数 它的作用是在 a 和 b 之间创建一个渐变，并返回该比例上 p 点（0 和 1 之间的值）上存在的颜色。这基本上是我想要的，但有一个问题：它不一定将这两种颜色与你想要介于两者之间的颜色进行插值，它更像是这两种颜色之间的棕色混合。

2. 安装 rainbow_color 包 这正是我所需要的，你可以插入多种自定义颜色，指定你使用的值范围（在我的例子中是 0.0 和 1.0，但它也可以是整数），它返回一个渐变只有这些颜色：

  var rb = Rainbow(
    spectrum: [
      Color(0xff1fff00),
      Color(0xffd0ff00),
      Color(0xffffaa00),
      Color(0xffffaa00),
      Color(0xffff6600)
    ],
    rangeStart: 1.0,
    rangeEnd: 0.0
  );

  return rb[remainingFraction];