Flutter Material3中BottomSheet背景色与设置值不符的问题排查与解决

核心原因 #

Material 3引入了**Surface Tint（表面色调）**设计机制，当BottomSheet带有elevation（阴影层级）时，会自动在背景色上叠加一层主题主色的淡色，导致你设置的纯色被混合，看起来和内部同色元素有差异。

快速解决方案 #

在showModalBottomSheet中添加surfaceTintColor: Colors.transparent，直接移除表面色调的影响：

showModalBottomSheet(
  context: context,
  backgroundColor: Colors.white,
  surfaceTintColor: Colors.transparent, // 关键配置：取消表面色调叠加
  elevation: 4, // 保留阴影的话可以不用改，透明的surfaceTint不影响阴影
  builder: (context) {
    return Container(
      color: Colors.white, // 内部元素背景色
      padding: const EdgeInsets.all(16),
      child: const Text('测试内容'),
    );
  },
);

全局配置方案 #

如果希望所有BottomSheet都生效，可以在Theme中全局修改BottomSheetThemeData：

ThemeData(
  useMaterial3: true,
  bottomSheetTheme: const BottomSheetThemeData(
    backgroundColor: Colors.white,
    surfaceTintColor: Colors.transparent,
  ),
)

这样无论是showModalBottomSheet还是其他BottomSheet组件，都会使用纯净的背景色，和内部同色元素保持一致。

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