Flutter - LinearGradient 的平滑过渡颜色答案

【问题标题】：Flutter - Smooth transition color for LinearGradientFlutter - LinearGradient 的平滑过渡颜色
【发布时间】：2018-03-28 20:53:20
【问题描述】：

你好！

是否有一种解决方案可以创建在开始颜色和 ens 颜色之间具有平滑过渡的 LinearGradient？

new Container(
        decoration: new BoxDecoration(
          gradient: new LinearGradient(
              colors: [
                Colors.black,
                Colors.grey,
              ],
            stops: [0.0, 1.0],
            begin: FractionalOffset.topCenter,
            end: FractionalOffset.bottomCenter,
            tileMode: TileMode.repeated
          )
        ),
)

【问题讨论】：

这里有什么问题？

标签： flutter

【解决方案1】：

在您的主函数集Paint.enableDithering = true; 中，如下所示：

void main() {
  Paint.enableDithering = true;
  runApp(DesignChallenge05());
}

【讨论】：

这对我没有任何影响
它对我有用。确保重启而不是热重载。

【解决方案2】：

看起来好像来自 Android 模拟器。如果是这种情况，它会使用低质量的渲染器，以便它运行得足够快，尤其是在功能较弱的硬件上。在真实设备上进行测试，您可能会看到更好的结果。我相信您也可以提升模拟器上的图形，但不能 100% 确定这是否会改善这一点。见here。

这是 Nexus 4 与模拟器上的渐变效果。

【讨论】：

我在真实设备上测试获得了更好的结果。谢谢！

【解决方案3】：

你可以试试这个线性渐变

new Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          gradient: LinearGradient(begin: Alignment.bottomRight, stops: [
            0.1,
            0.9
          ], colors: [
            Colors.black.withOpacity(.8),
            Colors.black.withOpacity(.1)
          ])),
    ),

【讨论】：

【解决方案4】：

当您在相似颜色之间转换很远距离（数百像素）时，屏幕可能无法平滑渲染。

一种可能的解决方案是在 Photoshop 中创建带有渐变的背景图像。对图片满意后，将其剪切为 1 px 宽度，并将其用作背景图片，垂直重复。

【讨论】：

即使采用这种方法，我也得到了相同的结果。谢谢！
如果屏幕无法显示某些颜色，那么颜色是否来自图像并不重要
当今大多数屏幕都非常擅长显示所有颜色。不同之处在于 Photoshop 在历史上拥有更好的算法来计算平滑视觉渐变的颜色。随着浏览器、移动设备和其他渲染引擎越来越强大，这可能不再适用。