Flutter Material3环境下BottomAppBar缺口不显示问题及迁移咨询

问题原因 #

在Flutter 3.7的Material3实现中，BottomAppBar默认未启用裁剪行为，导致shape定义的缺口无法被正确渲染；同时Material3新增的surfaceTintColor默认会添加一层表面着色效果，可能填充缺口区域，遮挡预期的缺口样式。

解决方案 #

对BottomAppBar做以下两处修改即可恢复缺口效果：

1. 添加clipBehavior: Clip.antiAlias开启裁剪，确保shape的缺口被正确渲染；
2. 设置surfaceTintColor: Colors.transparent避免表面着色覆盖缺口（若默认着色不影响可省略）。

修改后的完整代码：

Scaffold(
  appBar: AppBar(title: const Text('Bottom App Bar')),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    child: const Icon(Icons.add),
    onPressed: () {},
  ),
  bottomNavigationBar: BottomAppBar(
    shape: const CircularNotchedRectangle(),
    notchMargin: 8.0,
    clipBehavior: Clip.antiAlias, // 启用裁剪渲染缺口
    surfaceTintColor: Colors.transparent, // 移除表面着色避免遮挡缺口
    child: Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        IconButton(icon: const Icon(Icons.menu), onPressed: () {}),
        IconButton(icon: const Icon(Icons.search), onPressed: () {}),
      ],
    ),
  ),
)

Material3迁移补充建议 #

• 若需统一配置全局BottomAppBar样式，可在ThemeData的bottomAppBarTheme中设置shape、clipBehavior和surfaceTintColor，避免重复代码；
• Material3官方推荐使用新的NavigationBar组件实现底部导航，但如果需要保留BottomAppBar+悬浮按钮的组合，上述修改完全兼容；
• 迁移过程中需注意其他组件的属性变化，比如AppBar的centerTitle默认值、按钮组件的样式逻辑等，可对照官方Material3组件规范调整主题配置。

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