Flutter如何实现BlendMode.srcOver效果且不破坏图片原有圆角？

问题根因 #

你遇到的圆角丢失问题是BlendMode.srcOver的混合逻辑导致的：该模式会将你指定的半透明颜色绘制在整个DecorationImage对应的矩形画布上方，不会过滤原图的透明像素区域，因此图片圆角处的透明区域也会被半透色填充，原本的圆角就变成了尖角。
而BlendMode.modulate色偏是因为该模式会将你指定的颜色与原图每个像素的RGB值做乘法运算，会直接改变原图的色相与明暗度，无法得到纯色叠层的效果。

解决方案 #

两种方案均兼容BoxFit.contain的配置要求，不需要修改fit属性。

方案1：替换混合模式为BlendMode.srcATop（改动最小）

BlendMode.srcATop的混合逻辑是仅在原图（目标层）的不透明区域绘制半透色（源层），在图片的非透明区域的视觉效果和BlendMode.srcOver完全一致，同时不会覆盖原图的透明圆角区域，无需其他额外配置。
修改后代码如下：

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage("assets/images/signup_bg.png"),
      fit: BoxFit.contain,
      colorFilter: ColorFilter.mode(
        Color(0xFFEDDFD0).withOpacity(0.80),
        BlendMode.srcATop, // 仅修改这一行即可
      )),
    color: Color(0xFFE5E5E5),
  ),
),

方案2：添加裁剪配置（完全保留BlendMode.srcOver效果）

如果你需要100%还原BlendMode.srcOver的混合效果，可以给外层Container设置和原图圆角一致的圆角半径，同时开启内容裁剪，srcOver填充在圆角区域的多余颜色会被直接裁剪掉，即可保留圆角。
修改后代码如下（需将示例中的圆角值替换为你实际图片的圆角半径）：

Container(
  clipBehavior: Clip.antiAlias, // 开启内容裁剪
  decoration: BoxDecoration(
    // 替换为你图片实际的圆角半径
    borderRadius: BorderRadius.circular(12),
    image: DecorationImage(
      image: AssetImage("assets/images/signup_bg.png"),
      fit: BoxFit.contain,
      colorFilter: ColorFilter.mode(
        Color(0xFFEDDFD0).withOpacity(0.80),
        BlendMode.srcOver,
      )),
    color: Color(0xFFE5E5E5),
  ),
),

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