Flutter SDK径向渐变过渡不流畅？如何实现平滑渐变？

你遇到的这种色块拼接的问题，其实是代码里的stops参数设置出了问题——你把结束色的位置设成了0.5，导致半径0.5到1.0的区域直接跳变成结束色，完全没有过渡效果。咱们来快速解决这个问题：

先看你原来的代码问题点：

Color gradient_start = const Color (0xDD222222);
Color gradient_end = const Color (0xDD444444);
//some code
new Container(
  decoration: new BoxDecoration(
    gradient: new RadialGradient(
      colors: [gradient_start, gradient_end],
      radius: 1.0,
      stops: [ 0.0, 0.5, ], // 这里是关键问题：结束色标只到半径的一半
      tileMode: TileMode.clamp,
    )
  ),

下面给你几个可行的解决方案：

方案1：直接移除stops参数（最简单） #

如果你不需要自定义色标的位置，删掉stops属性就好，Flutter会自动在0.0到1.0的范围内生成平滑的渐变过渡：

Color gradient_start = const Color(0xDD222222);
Color gradient_end = const Color(0xDD444444);

Container(
  decoration: BoxDecoration(
    gradient: RadialGradient(
      colors: [gradient_start, gradient_end],
      radius: 1.0,
      tileMode: TileMode.clamp,
    ),
  ),
);

方案2：正确设置stops参数 #

如果必须要自定义色标位置，记得把最后一个stop的值设为1.0，让渐变覆盖整个径向范围：

Color gradient_start = const Color(0xDD222222);
Color gradient_end = const Color(0xDD444444);

Container(
  decoration: BoxDecoration(
    gradient: RadialGradient(
      colors: [gradient_start, gradient_end],
      radius: 1.0,
      stops: const [0.0, 1.0], // 结束色标延伸到半径末端
      tileMode: TileMode.clamp,
    ),
  ),
);

方案3：增加中间过渡色（追求更细腻的效果） #

如果两种颜色的差异还是让你觉得过渡不够自然，可以在中间加一个过渡色，进一步柔化渐变效果：

Color gradient_start = const Color(0xDD222222);
Color gradient_mid = const Color(0xDD333333); // 中间过渡色
Color gradient_end = const Color(0xDD444444);

Container(
  decoration: BoxDecoration(
    gradient: RadialGradient(
      colors: [gradient_start, gradient_mid, gradient_end],
      radius: 1.0,
      stops: const [0.0, 0.5, 1.0], // 对应三个色标的位置
      tileMode: TileMode.clamp,
    ),
  ),
);

简单总结一下：之前的问题是因为渐变只覆盖了一半的半径范围，剩下的区域直接用了纯色，所以看起来像色块拼接。调整后渐变会铺满整个容器的径向区域，自然就能得到平滑的过渡效果啦。

内容的提问来源于stack exchange，提问作者Moon Star