如何移除BottomNavigationBar的安全区域内边距？

不需要自定义组件，通过调整MediaQuery就能实现移除BottomNavigationBar自带的、用于避开iPhone X等设备底部系统栏的viewInsets内边距，具体有两种可行方式：

方法一：使用MediaQuery.removeViewInsets #

直接移除底部的viewInsets，让BottomNavigationBar不再应用这部分内边距：

MediaQuery.removeViewInsets(
  context: context,
  removeBottom: true,
  child: BottomNavigationBar(
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
    ],
    // 你的其他配置项
  ),
)

方法二：覆盖MediaQuery的viewInsets数据 #

通过复制当前MediaQuery数据并将viewInsets设为零，让BottomNavigationBar读取不到系统内边距：

MediaQuery(
  data: MediaQuery.of(context).copyWith(viewInsets: EdgeInsets.zero),
  child: BottomNavigationBar(
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
    ],
    // 你的其他配置项
  ),
)

这两种方式都能消除BottomNavigationBar与下方组件之间的多余间距，满足你在其下方放置其他组件的需求。

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