Flutter：如何移除Material组件阴影的多余边框，仅保留底部阴影？

你看到的“边框”其实不是真正的边框，是Material组件elevation属性生成的四周阴影带来的视觉效果，borderOnForeground属性只控制自定义边框是否绘制在子组件前方，对elevation自带的阴影完全不起作用，所以设置它没用。

要实现仅保留底部阴影的效果，最直接的方式是放弃Material的elevation，改用Container的BoxDecoration自定义阴影，这样能精准控制阴影的位置：

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5), // 阴影颜色，可按需调整
        spreadRadius: 0, // 设为0避免边缘出现扩散效果
        blurRadius: 5, // 模糊程度，对应elevation的视觉强度
        offset: const Offset(0, 3), // 仅向下偏移，只在底部显示阴影
      ),
    ],
  ),
  child: SizedBox(width: 200, height: 200),
)

如果一定要保留Material组件（比如需要它的其他特性），可以通过自定义ThemeData修改elevation对应的阴影配置，但这种方式复杂度更高，不如自定义阴影灵活。核心思路是把除底部外的阴影参数设为透明或无偏移，示例如下：

MaterialApp(
  theme: ThemeData(
    elevationOverlayColor: Colors.transparent,
    shadowColor: Colors.grey.withOpacity(0.5),
    cardTheme: CardTheme(
      elevation: 5,
      shadowColor: Colors.grey.withOpacity(0.5),
    ),
  ),
  home: Scaffold(
    body: Center(
      child: Material(
        elevation: 5,
        child: SizedBox(width: 200, height: 200),
      ),
    ),
  ),
);

整体更推荐第一种自定义BoxShadow的方式，简单直观，完全匹配你的需求。

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