Flutter问题：带渐变遮罩的Card组件中图片边缘出现渗色

这种边缘渗色大多不是Flutter的UI Bug，而是组件层叠时的渲染对齐、抗锯齿差异，或是内容未完全匹配Card边界导致的。以下是几个可靠的解决/替代方案：

方案1：用ClipRRect同步裁切渐变层与Card圆角 #

给渐变遮罩层套上和Card圆角完全一致的ClipRRect，确保渐变层边缘完全贴合Card的圆角范围，避免边缘漏色：

Card(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
  child: Stack(
    fit: StackFit.expand,
    children: [
      CachedNetworkImage(
        imageUrl: "你的图片URL",
        fit: BoxFit.cover,
      ),
      ClipRRect(
        borderRadius: BorderRadius.circular(12), // 与Card圆角保持一致
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Colors.transparent, Colors.black54],
            ),
          ),
        ),
      ),
    ],
  ),
)

方案2：改用ShaderMask替代Stack层叠 #

ShaderMask是Flutter专门用于给子组件添加渐变遮罩的组件，渲染逻辑更统一，能避免层叠时的边缘渲染误差：

Card(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(12),
    child: ShaderMask(
      shaderCallback: (rect) {
        return LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.transparent, Colors.black54],
        ).createShader(rect);
      },
      blendMode: BlendMode.darken, // 可根据视觉需求调整混合模式
      child: CachedNetworkImage(
        imageUrl: "你的图片URL",
        fit: BoxFit.cover,
      ),
    ),
  ),
)

方案3：统一裁切整个Stack内容 #

将整个Stack用ClipRRect裁切至Card的圆角尺寸，确保图片和渐变层都不会超出Card边界：

Card(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(12),
    child: Stack(
      fit: StackFit.expand,
      children: [
        CachedNetworkImage(
          imageUrl: "你的图片URL",
          fit: BoxFit.cover,
          alignment: Alignment.center, // 确保图片居中，避免边缘偏移
        ),
        Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Colors.transparent, Colors.black54],
            ),
          ),
        ),
      ],
    ),
  ),
)

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