Flutter自定义BottomAppBar与屏幕底部存在空白区域如何解决

问题原因 #

• 你给BottomAppBar设置了color: Colors.white，而BottomAppBar默认会自带适配系统底部安全区的内边距，这部分内边距区域会渲染为白色，就是你看到的底部空白
• 若页面使用Scaffold未开启extendBody配置，也会额外产生底部间隙

修复步骤 #

1. 修改自定义BottomAppBar组件代码 #

将你的组件代码替换为如下版本，移除多余的白色背景、默认内边距：

import 'package:flutter/material.dart';

// 注意：Dart规范类名使用大驼峰，此处将原小写的bottomAppBar改为CustomBottomAppBar
class CustomBottomAppBar extends StatelessWidget {
  const CustomBottomAppBar({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      // 颜色与内部容器保持一致，也可直接删除内层同色容器减少嵌套层级
      color: const Color(0xFF313131).withOpacity(0.7),
      // 移除默认内边距，消除多余空白
      padding: EdgeInsets.zero,
      elevation: 0,
      child: SizedBox(
        height: 50,
        width: double.maxFinite,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconButton(
              onPressed: () => Navigator.pushNamed(context, '/'),
              icon: const Icon(Icons.home, color: Colors.white),
            ),
            IconButton(
              onPressed: () => Navigator.pushNamed(context, '/discover'),
              icon: const Icon(Icons.search, color: Colors.white),
            ),
            IconButton(
              onPressed: () => Navigator.pushNamed(context, '/mybookings'),
              // 注意：原代码中Icons.hello不存在，请替换为实际需要的图标
              icon: const Icon(Icons.card_travel, color: Colors.white),
            ),
            IconButton(
              onPressed: () => Navigator.pushNamed(context, '/user'),
              icon: const Icon(Icons.person, color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

2. 适配不同页面根组件场景 #

场景一：页面根组件为Scaffold

在Scaffold中添加extendBody: true配置：

Scaffold(
  extendBody: true,
  bottomNavigationBar: const CustomBottomAppBar(),
  // 其他页面配置...
)

如果你需要保留底部安全区适配（避免导航栏被系统手势条遮挡），删除上面组件中padding: EdgeInsets.zero的配置即可。

场景二：页面根组件为Column/Container等非Scaffold组件

使用MediaQuery.removePadding移除底部安全区默认填充：

MediaQuery.removePadding(
  context: context,
  removeBottom: true,
  child: Column(
    children: [
      Expanded(child: /* 你的页面内容 */),
      const CustomBottomAppBar(),
    ],
  ),
)

原问题效果截图 #

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