Flutter中如何让BottomNavigationBar背景铺满屏幕底部？

安全阿岳

2026-8-3

解决BottomNavigationBar无法覆盖屏幕底部空白的问题

这个底部空白是手机系统的底部安全区域（SafeArea），默认情况下Flutter会自动避开这个区域，导致导航栏背景无法铺满。以下是两种可行的解决方法：

方法一：使用Scaffold的extendBody属性 + SafeArea

修改MyHomePage中Scaffold的代码，添加extendBody: true，并给BottomNavigationBar套一层忽略底部安全区域的SafeArea：

return Scaffold(
  extendBody: true, // 让body延伸至导航栏下方
  body: Center(
    child: page,
  ),
  bottomNavigationBar: Container(
    color: Theme.of(context).colorScheme.secondaryContainer,
    child: SafeArea(
      bottom: false, // 不保留底部安全区域的间距
      child: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            label: 'Favorites',
          ),
        ],
        currentIndex: selectedIndex,
        onTap: _onItemTapped,
        backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
        elevation: 0.0,
        type: BottomNavigationBarType.fixed, // 确保导航栏填满宽度
      ),
    ),
  ),
);

方法二：直接给BottomNavigationBar添加底部安全区域padding

通过MediaQuery获取底部安全区域的高度，给导航栏设置对应的padding，让背景覆盖空白：

bottomNavigationBar: BottomNavigationBar(
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.favorite),
      label: 'Favorites',
    ),
  ],
  currentIndex: selectedIndex,
  onTap: _onItemTapped,
  backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
  elevation: 0.0,
  padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewPadding.bottom),
),