Flutter自定义BottomAppBar后底部与屏幕出现空白如何解决

你遇到的底部空白问题可以通过以下几个修改点解决：

• 移除BottomAppBar默认的内边距和多余高度：BottomAppBar默认自带内边距和最小高度限制，同时你当前给BottomAppBar设置的白色底色就是你看到的空白区域颜色，仅需调整相关属性即可消除。
• 关闭不必要的安全区域底部填充：如果你的Scaffold或者BottomAppBar外层包裹了SafeArea，需要将SafeArea的bottom属性设为false，避免自动适配系统底部手势区域时产生空白。
• 优化组件嵌套减少冗余：可以直接把Container的属性配置到BottomAppBar上，减少不必要的嵌套层级。

修改后的完整代码 #

import 'package:flutter/material.dart';

class CustomBottomAppBar extends StatelessWidget {
  const CustomBottomAppBar({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      padding: EdgeInsets.zero, // 移除默认内边距
      elevation: 0, // 移除默认阴影避免视觉偏移
      height: 50, // 明确设置高度和内部内容一致
      color: const Color(0xFF313131).withOpacity(0.7),
      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');
            },
            icon: const Icon(
              // 注意：Icons.hello不是Flutter官方自带图标，请确认你已导入对应的图标库
              Icons.book,
              color: Colors.white,
            ),
          ),
          IconButton(
            onPressed: () {
              Navigator.pushNamed(context, '/user');
            },
            icon: const Icon(
              Icons.person,
              color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }
}

如果修改后仍有空白，检查你使用该组件的Scaffold是否添加了额外的底部padding，你也可以给Scaffold设置extendBody: true让页面内容延伸到底部导航栏下方，进一步避免空白。

问题示例图 #

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