Flutter中NavigationBar默认颜色是什么？需匹配模态底部弹窗颜色

问题描述 #

我在Flutter应用中使用了NavigationBar，偶尔会弹出模态底部弹窗（modal bottom sheet），希望让这个底部弹窗的颜色和NavigationBar保持一致，想知道NavigationBar的默认颜色是什么？

当前使用的弹窗代码：

showModalBottomSheet<void>(
  context: _scaffoldKey.currentContext!,
  builder: (BuildContext context) {
    return BottomSheetComponent(marker: marker);
  },
  clipBehavior: Clip.hardEdge,
)

解决方案 #

NavigationBar的默认背景色并非固定值，它继承自当前主题的colorScheme.surface属性，这是Material 3设计规范下的默认配置。

要让模态底部弹窗和NavigationBar颜色统一，不需要硬编码颜色值，直接从主题中获取对应颜色即可，修改后的弹窗代码如下：

showModalBottomSheet<void>(
  context: _scaffoldKey.currentContext!,
  backgroundColor: Theme.of(context).colorScheme.surface,
  builder: (BuildContext context) {
    return BottomSheetComponent(marker: marker);
  },
  clipBehavior: Clip.hardEdge,
)

补充说明：如果你的项目仍在使用Material 2，NavigationBar的默认背景色则对应Theme.of(context).bottomNavigationBarTheme.backgroundColor，目前Material 3是Flutter的主流推荐设计方案。

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