Flutter中如何实现容器间裁剪及中间清晰边缘半透明效果

效果示意图：

下面提供两种可行的实现思路，无需复杂的容器裁剪操作，直接通过CSS即可完成：

方法1：CSS mask-image 遮罩（推荐） #

这是最直接的实现方式，利用CSS遮罩属性，给图片添加径向渐变遮罩层——中心区域完全不透明（对应需求中的红色可见区域），边缘区域渐变至透明（对应绿色透明区域）。

代码示例 #

<div class="image-wrapper">
  <img src="your-image-url" alt="目标图片">
</div>

.image-wrapper {
  width: 400px; /* 自定义容器尺寸 */
  height: 400px;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例填充容器 */
  /* 核心：径向渐变遮罩 */
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%); /* 兼容Chrome、Safari等webkit浏览器 */
}

调整说明 #

• 修改65%可以控制中心清晰区域的大小，数值越大，清晰范围越广
• 修改100%可以调整透明过渡的范围，比如改成95%会让边缘透明的过渡更急促

方法2：伪元素叠加渐变层（兼容旧浏览器） #

如果需要兼容不支持mask-image的旧版本浏览器，可以用伪元素在图片上方叠加一层径向渐变遮罩，通过背景渐变和混合模式实现效果。

代码示例 #

<div class="image-wrapper">
  <img src="your-image-url" alt="目标图片">
</div>

.image-wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 中心透明，边缘过渡到页面背景色（这里以白色为例） */
  background: radial-gradient(circle at center, transparent 65%, #ffffff 100%);
  /* 混合模式让过渡更自然，可根据背景色调整 */
  mix-blend-mode: overlay;
}

调整说明 #

• 如果页面背景不是纯色，可将#ffffff替换为对应背景色，或调整mix-blend-mode的值（如multiply、screen）来适配

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