Flutter/Dart:如何从 Colorgradient 中获取单色?

问题描述

我正在尝试构建一个 Widget,它会随着时间的推移将其背景颜色从绿色变为红色,但以一种流畅的方式。非常类似于渐变背景:

enter image description here

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

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

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

解决方法

好的,我实际上找到了两个解决方案:

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(0xffff6600)
    ],rangeStart: 1.0,rangeEnd: 0.0
  );

  return rb[remainingFraction];

enter image description here