Flutter如何在底部导航栏BottomNavigationBar中实现居中圆形按钮

你可以按以下步骤修改代码实现需求：

方案1：直接修改现有BottomNavigationBar中间项 #

把你当前第三个BottomNavigationBarItem替换为如下代码即可，不需要改动其他导航项配置：

BottomNavigationBarItem(
  icon: InkWell(
    onTap: () {
      print('xxx');
    },
    customBorder: const CircleBorder(),
    child: Container(
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(color: Colors.grey, width: 2),
      ),
      child: const Icon(
        Icons.add,
        color: Colors.grey,
        size: 24,
      ),
    ),
  ),
  activeIcon: InkWell(
    onTap: () {
      print('xxx');
    },
    customBorder: const CircleBorder(),
    child: Container(
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(color: Colors.green, width: 2),
      ),
      child: const Icon(
        Icons.add,
        color: Colors.green,
        size: 24,
      ),
    ),
  ),
  label: '',
),

同时给你的BottomNavigationBar组件加一个属性，避免图标在选中时位移：

type: BottomNavigationBarType.fixed,

方案2：用悬浮按钮实现更贴合YouTube的原生效果 #

如果需要按钮有轻微悬浮凸起的效果，推荐用Scaffold自带的悬浮按钮属性实现，点击冲突更少：

Scaffold(
  // 配置中间悬浮按钮
  floatingActionButton: FloatingActionButton(
    onPressed: () => print('xxx'),
    backgroundColor: Colors.transparent,
    elevation: 0,
    shape: CircleBorder(side: BorderSide(color: Colors.grey, width: 2)),
    child: const Icon(Icons.add, color: Colors.grey),
  ),
  // 让悬浮按钮固定在底部导航中间
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(
    shape: const CircularNotchedRectangle(),
    notchMargin: 6,
    child: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      selectedItemColor: Colors.green,
      unselectedItemColor: Colors.grey,
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.search),
          label: 'Search',
        ),
        // 占位用，不需要写图标
        BottomNavigationBarItem(icon: SizedBox.shrink(), label: ''),
        BottomNavigationBarItem(
          icon: Icon(Icons.shopping_cart),
          label: 'Groceries',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: 'Account',
        ),
      ],
    ),
  ),
  // 你的其他页面配置
)

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