Flutter中如何设置Card组件使其四边/四角显示elevation阴影

先排查最常见的布局裁切问题 #

绝大多数场景下不是Card本身的阴影配置错了，是阴影被外层布局裁剪了：

• Card的elevation阴影是绘制在组件自身边界之外的，如果你的Card放在Column、ListView、Stack这类布局里，外层没有给Card四周预留足够的空隙，上下左右超出组件边界的阴影会被布局自动裁切，刚好底部因为下方通常有空白间距，就会出现只有底部有阴影的视觉效果。
• 修复方式很简单：给Card设置margin属性，或者给Card外层加Padding，四周预留至少和阴影模糊半径匹配的空隙即可，比如margin: const EdgeInsets.all(8)就能满足大部分常规elevation值的阴影显示需求。

方案1：保留Card组件原生特性调整 #

如果你需要保留Card自带的水波纹、裁切、Material特性，可以直接调整Card的几个属性，让四周阴影都清晰可见，适配Flutter 3.0+版本：

Card(
  // 适当调大elevation值，让阴影范围足够覆盖四周
  elevation: 6,
  // 加深阴影透明度，避免四周淡阴影和背景融在一起看不见
  shadowColor: Colors.black.withOpacity(0.15),
  // 关掉Flutter 3.0之后默认的表面色调叠加，避免阴影发灰偏色
  surfaceTintColor: Colors.transparent,
  // 四周留够阴影显示的空隙，避免被裁切
  margin: const EdgeInsets.all(8),
  // 自定义圆角按需配置即可
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12)
  ),
  child: const SizedBox(
    width: double.infinity,
    height: 100,
    // 卡片内容放在这里
  ),
)

说明：Flutter默认的Material阴影是模拟顶部方向光源绘制的，本身就会底部阴影稍重，属于设计规范内的正常效果，只要调整阴影透明度和预留边距，就能做到四个侧边、四角的阴影都正常可见。

方案2：需要完全均匀的四周阴影 #

如果你的设计要求阴影完全均匀分布、没有方向偏重，不要硬改Card的elevation实现，直接用Container+BoxShadow实现卡片效果即可，阴影偏移设为0就能做到四周完全一致：

// 需要保留水波纹效果可以在外层套Material/InkWell
Container(
  margin: const EdgeInsets.all(8),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.1),
        blurRadius: 8,
        spreadRadius: 0,
        // 偏移设为(0,0)，阴影四周完全均匀
        offset: const Offset(0, 0),
      )
    ],
  ),
  child: const SizedBox(
    width: double.infinity,
    height: 100,
    // 卡片内容放在这里
  ),
)

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