Flutter LinearGradient过渡不平滑求助：如何实现图片渐变平滑过渡

在图片上应用LinearGradient线性渐变时，渐变过渡效果不平滑，渐变结束位置出现明显线条。当前使用的代码如下：

Container(
  height: 350,
  decoration: BoxDecoration(
    borderRadius: const BorderRadius.all(Radius.circular(25)),
    boxShadow: const [BoxShadow(color: Color.fromRGBO(104, 104, 104, 0.2), offset: Offset(0, 1), spreadRadius: 5, blurRadius: 10)],
    image: DecorationImage(
      image: getImage(imageno: 123).image,
      fit: BoxFit.cover,
    ),
  ),
),
Positioned(
  bottom: 0,
  left: 0,
  right: 0,
  child: Container(
    height: 225,
    foregroundDecoration: const BoxDecoration(
      borderRadius: BorderRadius.only(bottomLeft: Radius.circular(25.0), bottomRight: Radius.circular(25.0)),
      gradient: LinearGradient(
        colors: [
          Color.fromRGBO(0, 0, 0, 0),
          Color.fromRGBO(0, 0, 0, 0.65),
          Color.fromRGBO(22, 22, 22, 0.81),
        ],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        stops: [0, 0.3, 0.1],
      ),
    ),
  ),
),

问题原因 #

你设置的stops参数数组[0, 0.3, 0.1]是非递增顺序的，这违反了LinearGradient的渲染规则。stops数组中的每个值对应colors数组里对应颜色的位置，必须从0到1依次递增，否则会导致渐变逻辑混乱，出现明显的颜色断层线条。

修复方案 #

将stops数组修改为递增的数值，比如[0, 0.3, 1.0]，或者直接移除stops参数，让Flutter自动为颜色分配过渡位置：

修正后的代码 #

Container(
  height: 350,
  decoration: BoxDecoration(
    borderRadius: const BorderRadius.all(Radius.circular(25)),
    boxShadow: const [BoxShadow(color: Color.fromRGBO(104, 104, 104, 0.2), offset: Offset(0, 1), spreadRadius: 5, blurRadius: 10)],
    image: DecorationImage(
      image: getImage(imageno: 123).image,
      fit: BoxFit.cover,
    ),
  ),
),
Positioned(
  bottom: 0,
  left: 0,
  right: 0,
  child: Container(
    height: 225,
    foregroundDecoration: const BoxDecoration(
      borderRadius: BorderRadius.only(bottomLeft: Radius.circular(25.0), bottomRight: Radius.circular(25.0)),
      gradient: LinearGradient(
        colors: [
          Color.fromRGBO(0, 0, 0, 0),
          Color.fromRGBO(0, 0, 0, 0.65),
          Color.fromRGBO(22, 22, 22, 0.81),
        ],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        // 修正为递增的stops，或者直接删除这一行
        stops: [0, 0.3, 1.0],
      ),
    ),
  ),
),

额外说明 #

如果不需要精确控制颜色的过渡位置，完全可以省略stops参数，Flutter会自动根据颜色数量均匀分配过渡点，这样也能保证渐变的平滑性。

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