Flutter底部导航栏中间悬浮按钮如何自定义形状与样式？

一、原生实现方案 #

无需依赖第三方包，用Flutter自带组件就能实现目标效果：

1. 配置底部导航栏（BottomAppBar）
   通过shape属性设置导航栏的缺口形状，给中间悬浮按钮预留位置，同时调整颜色、高度等样式：

BottomAppBar(
  shape: const CircularNotchedRectangle(), // 自带缺口形状，也可自定义ShapeBorder实现特殊样式
  color: Colors.white,
  elevation: 8,
  child: SizedBox(
    height: 60,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        IconButton(icon: const Icon(Icons.home), onPressed: () {}),
        IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        const SizedBox(width: 40), // 给中间悬浮按钮留空
        IconButton(icon: const Icon(Icons.notifications), onPressed: () {}),
        IconButton(icon: const Icon(Icons.person), onPressed: () {}),
      ],
    ),
  ),
)

2. 自定义悬浮按钮（FloatingActionButton）
   调整按钮的形状、背景色、阴影等属性，实现自定义外观：

FloatingActionButton(
  onPressed: () {},
  shape: const CircleBorder(), // 圆形，也可用RoundedRectangleBorder自定义圆角/异形
  backgroundColor: Colors.blueAccent,
  elevation: 8,
  child: const Icon(Icons.add, color: Colors.white, size: 30),
)

3. 组合布局
   将两者放入Scaffold中，设置悬浮按钮的位置为导航栏中央：

Scaffold(
  body: const Center(child: Text('主内容区域')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    shape: const CircleBorder(),
    backgroundColor: Colors.blueAccent,
    child: const Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(
    shape: const CircularNotchedRectangle(),
    color: Colors.white,
    elevation: 8,
    child: SizedBox(
      height: 60,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          IconButton(icon: const Icon(Icons.home), onPressed: () {}),
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
          const SizedBox(width: 40),
          IconButton(icon: const Icon(Icons.notifications), onPressed: () {}),
          IconButton(icon: const Icon(Icons.person), onPressed: () {}),
        ],
      ),
    ),
  ),
)

如果需要更特殊的形状，可自定义ShapeBorder类实现。

二、第三方包推荐 #

若觉得原生配置繁琐，这些包可快速实现需求：

• curved_navigation_bar：支持自定义中间按钮的形状、颜色，自带曲线过渡动画，使用简单：

CurvedNavigationBar(
  backgroundColor: Colors.white,
  color: Colors.blueAccent,
  buttonBackgroundColor: Colors.blueAccent,
  height: 60,
  items: const [
    Icon(Icons.home, color: Colors.white),
    Icon(Icons.search, color: Colors.white),
    Icon(Icons.add, color: Colors.white), // 中间按钮
    Icon(Icons.notifications, color: Colors.white),
    Icon(Icons.person, color: Colors.white),
  ],
  onTap: (index) {},
)

• persistent_bottom_nav_bar：功能更全面，支持多种导航样式，可深度自定义按钮的大小、形状和交互效果。

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