Flutter：如何为带image的Container widget添加内部阴影？

方法1：用BoxShadow的inset属性做内部阴影，搭配ColorFiltered让图片偏黑 #

Flutter的BoxShadow有个inset参数，设为true就能生成内部阴影。再用ColorFiltered给图片加滤镜，快速实现偏黑效果。

示例代码：

Container(
  width: 300,
  height: 200,
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.5), // 阴影颜色+透明度
        blurRadius: 10, // 阴影模糊程度
        spreadRadius: 2, // 阴影扩散范围
        offset: Offset(0, 3), // 阴影偏移方向
        inset: true, // 关键：开启内部阴影
      ),
    ],
  ),
  child: ColorFiltered(
    // 颜色滤镜：数值越小图片越暗，0.5是半暗，改成0.3会更黑
    colorFilter: ColorFilter.matrix([
      0.5, 0, 0, 0, 0,
      0, 0.5, 0, 0, 0,
      0, 0, 0.5, 0, 0,
      0, 0, 0, 1, 0,
    ]),
    child: Image.network(
      'https://example.com/your-image.jpg',
      fit: BoxFit.cover,
      width: double.infinity,
      height: double.infinity,
    ),
  ),
)

方法2：用Stack叠加深色层+内部阴影 #

如果要更灵活控制暗度和阴影层级，用Stack是个好办法：

Stack(
  fit: StackFit.expand,
  children: [
    // 底层放图片
    Image.network(
      'https://example.com/your-image.jpg',
      fit: BoxFit.cover,
    ),
    // 中间叠半透明黑色层，调整opacity控制暗度
    Container(
      color: Colors.black.withOpacity(0.4),
    ),
    // 顶层放带内部阴影的容器
    Container(
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.6),
            blurRadius: 12,
            spreadRadius: 3,
            inset: true,
          ),
        ],
      ),
    ),
  ],
)

调整技巧 #

• 内部阴影：修改BoxShadow的color（比如换成深灰调更柔和）、blurRadius（数值越大阴影越模糊）、spreadRadius（数值越大阴影覆盖范围越广），就能调出你想要的效果。
• 图片暗度：
  • 方法1里把ColorFilter.matrix的0.5改成更小的数（比如0.3），图片会更黑；
  • 方法2里调整withOpacity()的参数，0是完全透明，1是全黑。

另外，如果是用BoxDecoration的image属性加载图片，记得用foregroundDecoration来设置内部阴影，这样阴影才会盖在图片上面：

Container(
  width: 300,
  height: 200,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('https://example.com/your-image.jpg'),
      fit: BoxFit.cover,
      // 直接给图片加暗化滤镜
      colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.4), BlendMode.darken),
    ),
  ),
  foregroundDecoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.5),
        blurRadius: 10,
        spreadRadius: 2,
        inset: true,
      ),
    ],
  ),
)

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