Flutter中如何为图片添加边缘暗化以提升叠加白色文字可读性？

我来给你分享几个实用的实现思路，完美贴合你想要的通讯录应用那种图片边缘渐变阴影效果，让叠加的白色文字清晰可读：

方法一：用Stack叠加渐变层（最常用且灵活） #

这是最简单直接的方式，通过Stack将图片、渐变遮罩层和文字依次叠加，精准控制阴影的位置和范围：

Stack(
  alignment: Alignment.bottomCenter, // 文字默认靠底部居中
  children: [
    // 底层展示的图片
    Image.network(
      'https://example.com/your-image.jpg', // 替换成你的图片地址
      fit: BoxFit.cover,
      height: 220,
      width: double.infinity,
    ),
    // 渐变阴影遮罩层：只在图片底部添加从透明到半黑的渐变
    Container(
      height: 100, // 控制阴影层的高度，按需调整
      width: double.infinity,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Colors.transparent, // 顶部完全透明
            Colors.black.withOpacity(0.7), // 底部半透明黑色
          ],
        ),
      ),
    ),
    // 最上层的白色文字
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
      child: Text(
        '张三',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
          fontWeight: FontWeight.w600,
        ),
      ),
    ),
  ],
)

效果说明 #

• 渐变层只覆盖图片底部需要放文字的区域，既不会遮挡图片主体，又能让白色文字和图片背景形成足够对比度，完全复刻通讯录的效果。
• 你可以调整gradient里的颜色透明度、渐变方向，或者修改Container的高度，适配不同的图片和文字布局需求。

方法二：用ShaderMask给图片添加渐变遮罩 #

如果不想额外加Container，也可以直接给图片本身添加渐变遮罩，代码更简洁：

Stack(
  alignment: Alignment.bottomCenter,
  children: [
    ShaderMask(
      shaderCallback: (Rect bounds) {
        return LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.transparent, Colors.black.withOpacity(0.6)],
          stops: [0.7, 1.0], // 0.7的位置开始渐变，让阴影更集中在底部
        ).createShader(bounds);
      },
      blendMode: BlendMode.darken, // 混合模式让渐变和图片自然融合
      child: Image.network(
        'https://example.com/your-image.jpg',
        fit: BoxFit.cover,
        height: 220,
        width: double.infinity,
      ),
    ),
    // 同样叠加白色文字
    Padding(
      padding: const EdgeInsets.all(16),
      child: Text(
        '李四',
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
  ],
)

效果说明 #

• ShaderMask会直接在图片上生成渐变遮罩，省去了额外的Container，但如果需要精准控制阴影层的高度，Stack+Container的方式会更灵活。

额外小技巧 #

如果需要图片上下都添加阴影（比如长图上下都要放文字），可以修改渐变的颜色数组：

gradient: LinearGradient(
  begin: Alignment.topCenter,
  end: Alignment.bottomCenter,
  colors: [
    Colors.black.withOpacity(0.5), // 顶部阴影
    Colors.transparent, // 中间透明
    Colors.black.withOpacity(0.7), // 底部阴影
  ],
  stops: [0.0, 0.5, 1.0], // 控制各渐变段的位置
),

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