Flutter中如何给FAB设边距避覆盖底部导航栏项及添加曲线样式

要解决FAB与底部导航项的间距问题，同时实现示例中的曲线样式，你需要用BottomAppBar替代默认的BottomNavigationBar——它支持自定义缺口形状，还能更灵活地控制布局间距。以下是修改后的完整代码：

Scaffold(
  backgroundColor: Colors.blue.shade100,
  body: const Center(
    child: Text('Bottombar 3'),
  ),
  // 用BottomAppBar实现带曲线的底部栏
  bottomNavigationBar: BottomAppBar(
    color: Colors.white,
    // 设置中间的曲线缺口，适配FAB
    shape: const CircularNotchedRectangle(),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        IconButton(
          icon: const Icon(Icons.home, color: Colors.grey),
          onPressed: () {},
        ),
        IconButton(
          icon: const Icon(Icons.shop, color: Colors.grey),
          onPressed: () {},
        ),
        // 留空位置给FAB，避免重叠
        const SizedBox(width: 40),
        IconButton(
          icon: const Icon(Icons.feedback, color: Colors.grey),
          onPressed: () {},
        ),
        IconButton(
          icon: const Icon(Icons.shopping_cart, color: Colors.grey),
          onPressed: () {},
        ),
      ],
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    // 设置margin调整与底部栏的间距
    margin: const EdgeInsets.only(top: 10),
    child: const Icon(Icons.add),
  ),
)

关键修改说明： #

• 曲线样式实现：通过BottomAppBar的shape: CircularNotchedRectangle()属性，生成适配FAB的圆形缺口，和示例中的曲线效果一致。
• 间距优化：
  1. 在BottomAppBar的Row中，给FAB对应的位置留了SizedBox(width:40)，避免导航项被FAB覆盖。
  2. 给FAB添加margin: EdgeInsets.only(top:10)，向上调整位置，加大与底部栏的间距。
• 布局灵活性：用IconButton替代原有的BottomNavigationBarItem，配合Row和MainAxisAlignment.spaceAround，让导航项均匀分布，布局更可控。

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