如何在Flutter中实现指定的线性渐变效果？

要实现你需要的垂直渐变效果，核心是正确设置渐变的颜色值和方向，以下是修正后的代码：

Container(
  width: 311, // 对应Android的311dp，可根据实际需求调整
  height: 37, // 对应Android的37dp，可根据实际需求调整
  decoration: const BoxDecoration(
    gradient: LinearGradient(
      // 180度渐变对应垂直方向（从上到下），默认就是此方向，可省略begin/end参数
      begin: Alignment.top,
      end: Alignment.bottom,
      colors: [
        // 对应CSS的rgba(1,79,134,0.4) / Android矢量图中的#66014F86
        Color(0x66014F86),
        // 不透明的目标色
        Color(0XFF014F86),
      ],
      // 对应CSS的0%和100%，默认值即为[0.0,1.0]，可省略
      stops: [0.0, 1.0],
    ),
  ),
)

你之前代码的问题分析 #

1. 颜色值错误：你设置的两个颜色都是不透明的Color(0XFF014F86)，没有包含CSS要求的半透明起始色，因此看不到渐变效果
2. 渐变方向错误：你设置的begin: Alignment.topLeft, end: Alignment.bottomRight是对角线渐变，而非CSS中180deg对应的垂直（从上到下）渐变
3. 多余的旋转设置：GradientRotation(pi)会旋转渐变方向，但默认的垂直渐变已经符合180deg的要求，无需额外旋转

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