如何在Flutter中为图片添加线性渐变叠加层？

要实现图片叠加线性渐变的效果，用Flutter的Stack组件就能轻松搞定，核心是把图片、渐变层、文本（如果需要）按层级堆叠。以下是两种常用实现方式：

方法一：Stack+Container渐变层 #

这种方式灵活度高，方便在渐变层上方添加文本等元素：

Stack(
  alignment: Alignment.bottomCenter, // 控制文本位置
  children: [
    // 底层图片
    Image.network(
      'https://example.com/your-image.jpg', // 替换为你的图片地址
      fit: BoxFit.cover,
      width: double.infinity,
      height: 220, // 自定义图片高度
    ),
    // 渐变叠加层
    Container(
      width: double.infinity,
      height: 220,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          // 渐变颜色：从上到下从透明过渡到半透明黑色
          colors: [
            Colors.transparent,
            Colors.black.withOpacity(0.7),
          ],
          // 可选：设置渐变起始位置，比如从图片60%高度开始渐变
          stops: [0.6, 1.0],
        ),
      ),
    ),
    // 上层文本（按需添加）
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Text(
        '示例标题文本',
        style: TextStyle(
          color: Colors.white,
          fontSize: 18,
          fontWeight: FontWeight.w600,
        ),
      ),
    ),
  ],
)

方法二：ShaderMask直接遮罩图片 #

如果不需要在渐变上添加其他元素，用ShaderMask更简洁：

ShaderMask(
  shaderCallback: (Rect bounds) => LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [Colors.transparent, Colors.black.withOpacity(0.7)],
  ).createShader(bounds),
  blendMode: BlendMode.darken, // 混合模式，可根据需求调整
  child: Image.network(
    'https://example.com/your-image.jpg',
    fit: BoxFit.cover,
    width: double.infinity,
    height: 220,
  ),
)

关键参数说明 #

• LinearGradient的begin和end：控制渐变方向，比如Alignment.bottomCenter到Alignment.topCenter就是从下往上渐变
• colors数组：自定义渐变的颜色过渡，支持多个颜色节点
• stops：配合colors使用，设置每个颜色对应的位置（0到1之间），精准控制渐变范围
• BlendMode：调整渐变与图片的混合方式，比如BlendMode.overlay会有不同的叠加效果

内容的提问来源于stack exchange，提问作者Ricardo González Flores