Flutter开发中如何移除BottomAppBar底部的多余空白区域

问题复现 #

在Flutter结合GetX开发场景下，通过BottomAppBar嵌套BottomNavigationBar实现带中心悬浮按钮的底部导航栏，核心实现代码如下：

class HomeView extends GetView<HomeController> {
  @override
  final HomeController controller = Get.put(HomeController());

  buildNavBar() {
    return Obx(
      () => BottomAppBar(
        shape: const CircularNotchedRectangle(),
        color: MyColorStyle.primary,
        notchMargin: 4,
        clipBehavior: Clip.antiAlias,
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          iconSize: 30.0,
          showSelectedLabels: false,
          showUnselectedLabels: false,
          selectedItemColor: MyColorStyle.primary,
          unselectedItemColor: Colors.grey[600],
          onTap: controller.changeTabIndex,
          currentIndex: controller.tabIndex.value,
          backgroundColor: Colors.white,
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.dashboard), label: ''),
            BottomNavigationBarItem(
                icon: Icon(Icons.calendar_today), label: ''),
            BottomNavigationBarItem(icon: Icon(Icons.show_chart), label: ''),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: ''),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      extendBody: true,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        backgroundColor: MyColorStyle.primary,
        elevation: 2,
        onPressed: () {
          showModalBottomSheet(
            isScrollControlled: true,
            context: context,
            builder: (BuildContext context) => ClipRRect(
              borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(40), topRight: Radius.circular(40)),
              child: SizedBox(
                height: Get.height * 0.8,
                child: Container(),
              ),
            ),
          );
        },
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: buildNavBar(),
      body: Obx(
        () => IndexedStack(
          index: controller.tabIndex.value,
          children: [
            SizedBox(),
            SizedBox(),
            SizedBox(),
            SizedBox(),
          ],
        ),
      ),
    );
  }
}

运行后底部导航栏下方（iOS Home Indicator位置）出现与BottomAppBar主色一致的蓝色多余空白，尝试SafeArea包裹等方案均无法消除，相同实现逻辑旧版本无该问题，未在Scaffold及相关组件中找到对应间距配置项。

问题根因 #

BottomNavigationBar组件默认会自动添加等于底部安全区高度的内边距，适配iOS Home Indicator区域。当它被嵌套在BottomAppBar内部时，BottomAppBar会按子组件完整高度（包含自带的底部安全区内边距）渲染，而BottomNavigationBar的白色背景只覆盖到导航图标区域，下方多出来的安全区高度就会露出BottomAppBar设置的蓝色背景，形成多余空白。

可行解决方案 #

• 方案1：移除BottomNavigationBar自带的底部安全区内边距（推荐）
  用MediaQuery.removePadding包裹BottomNavigationBar，移除组件默认添加的底部安全区padding，从根源消除高度差：

  buildNavBar() {
    return Obx(
      () => BottomAppBar(
        shape: const CircularNotchedRectangle(),
        color: MyColorStyle.primary,
        notchMargin: 4,
        clipBehavior: Clip.antiAlias,
        // 核心修改：移除子组件默认的底部安全区内边距
        child: MediaQuery.removePadding(
          context: context,
          removeBottom: true,
          child: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            iconSize: 30.0,
            showSelectedLabels: false,
            showUnselectedLabels: false,
            selectedItemColor: MyColorStyle.primary,
            unselectedItemColor: Colors.grey[600],
            onTap: controller.changeTabIndex,
            currentIndex: controller.tabIndex.value,
            backgroundColor: Colors.white,
            items: const [
              BottomNavigationBarItem(icon: Icon(Icons.dashboard), label: ''),
              BottomNavigationBarItem(icon: Icon(Icons.calendar_today), label: ''),
              BottomNavigationBarItem(icon: Icon(Icons.show_chart), label: ''),
              BottomNavigationBarItem(icon: Icon(Icons.settings), label: ''),
            ],
          ),
        ),
      ),
    );
  }
  

  注意：如果需要避免页面内容被Home Indicator遮挡，只需给Scaffold的body根节点包裹SafeArea即可，不要给底部导航栏部分添加SafeArea。

• 方案2：统一背景色适配安全区
  如果需要保留Home Indicator区域的安全边距，直接将BottomNavigationBar的backgroundColor设置为和BottomAppBar一致的MyColorStyle.primary，让底部安全区颜色和导航栏过渡自然，不会出现突兀的空白块。

• 方案3：放弃嵌套写法，直接在BottomAppBar中实现导航项
  不嵌套BottomNavigationBar，直接在BottomAppBar的child属性中写Row布局排列导航图标，手动处理点击状态和中间悬浮按钮的空位，完全自主控制组件布局和padding，从根源避免组件默认样式带来的适配问题。

内容的提问来源于stack exchange，提问作者Tayfun MEMİŞ