在Flutter中如何实现图中所示的自定义Bottom Navigation Bar？

你需要实现的底部导航效果如下图所示：

可直接使用的第三方Package方案 #

• bottom_bar_fab_flutter：专门针对中间FAB凸起的底部导航场景开发，支持自定义凸起高度、按钮尺寸、各导航项的图标文字样式，不需要复杂配置即可实现图中效果。
• curved_navigation_bar：自带弧形凸起适配能力，支持自定义导航栏颜色、选中切换动画，可单独配置中间悬浮按钮的样式。
• convex_bottom_bar：高度封装的凸起底部导航组件，支持多种内置样式，也可自定义参数匹配设计需求。

自定义实现方案（更灵活，可1:1还原设计） #

不需要依赖第三方包，直接用Flutter SDK自带组件即可实现，核心思路是配合Scaffold的floatingActionButton和BottomAppBar的凹槽能力实现效果，核心代码参考如下：

Scaffold(
  // 中间凸起的主按钮
  floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.blue,
    onPressed: () {
      // 中间按钮点击逻辑
    },
    child: const Icon(Icons.add, color: Colors.white),
  ),
  // 配置悬浮按钮位置为底部中间停靠
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(
    // 配置适配悬浮按钮的圆形凹槽
    shape: const CircularNotchedRectangle(),
    // 凹槽和悬浮按钮的间距
    notchMargin: 8,
    color: Colors.white,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        // 左侧导航项
        IconButton(
          onPressed: () {},
          icon: const Icon(Icons.home, size: 24),
        ),
        IconButton(
          onPressed: () {},
          icon: const Icon(Icons.list_alt, size: 24),
        ),
        // 占位空间，给中间悬浮按钮留位置
        const SizedBox(width: 48),
        // 右侧导航项
        IconButton(
          onPressed: () {},
          icon: const Icon(Icons.shopping_cart, size: 24),
        ),
        IconButton(
          onPressed: () {},
          icon: const Icon(Icons.person, size: 24),
        ),
      ],
    ),
  ),
)

你可以根据设计稿自由调整导航项的选中/未选中样式、文字标签、按钮大小、凹槽深度等参数，完全还原设计效果。

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