如何在Flutter中为图片实现渐隐阴影/暗角（Vignette）效果？

你之前用LinearGradient实现的是线性渐变阴影，自然达不到暗角的效果——暗角需要的是中心向四周逐渐变暗的径向渐变，用RadialGradient就能搞定。

下面给你两种常用的实现方式：

方式1：给单个组件直接加暗角 #

如果是给Container、Card这类容器组件加暗角，直接在BoxDecoration里配置RadialGradient即可：

Container(
  width: 300,
  height: 300,
  decoration: BoxDecoration(
    // 可设置组件的背景图或底色
    image: DecorationImage(
      image: NetworkImage('你的图片地址'),
      fit: BoxFit.cover,
    ),
    // 核心：径向渐变实现暗角
    gradient: RadialGradient(
      center: Alignment.center,
      radius: 1.0,
      colors: [
        Colors.transparent, // 中心透明，保留原内容亮度
        Colors.black.withOpacity(0.7), // 四周渐变到黑色半透明
      ],
      stops: [0.6, 1.0], // 控制渐变起始/结束位置，0.6表示从60%半径处开始渐变到边缘
    ),
  ),
)

方式2：用Stack给任意内容叠加暗角 #

如果是给列表、复杂布局这类组合内容加暗角，用Stack把原内容和暗角层叠起来：

Stack(
  alignment: Alignment.center,
  children: [
    // 这里放置需要加暗角的原内容
    Column(
      children: [
        Text('原内容文本'),
        Image.network('你的图片地址'),
      ],
    ),
    // 暗角层：覆盖在原内容上方
    Container(
      decoration: BoxDecoration(
        gradient: RadialGradient(
          center: Alignment.center,
          radius: 1.2, // 调整半径控制暗角覆盖范围
          colors: [
            Colors.transparent,
            Colors.black.withOpacity(0.5),
          ],
          stops: [0.7, 1.0],
        ),
      ),
    ),
  ],
)

关键参数调整说明 #

• radius：值越大，暗角渐变的范围越靠近组件边缘
• stops：数组内的数值对应渐变的起始/结束位置，调整它能改变暗角的渐变强度
• opacity：控制暗角的深浅，数值越大暗角越明显

之前用BoxShadow是给组件添加外部投影，和暗角的中心渐变逻辑完全不同，所以达不到预期效果，换成径向渐变就能解决问题。

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