Flutter iOS平台BottomSheet的ListView底部出现异常空白Bug

问题确认 #

• 仅iOS平台出现该异常：BottomSheet中的ListView最后一项下方存在约50像素的空白，该空白由Flutter SDK的安全区域适配逻辑导致
• 涉及Flutter版本：开发环境>=2.12.0 <3.0.0，复现环境>=3.1.5 <4.0.0

可行解决方案 #

1. 适配ListView底部内边距

针对iOS安全区域的影响，给ListView设置动态底部内边距，避免固定空白：

ListView(
  padding: EdgeInsets.only(
    bottom: MediaQuery.of(context).viewInsets.bottom,
  ),
  children: [
    // 你的列表项
  ],
)

这种方式会自动适配键盘弹出/收起的场景，同时消除多余的底部空白。

2. 覆盖BottomSheet的MediaQuery内边距

通过MediaQuery组件重置BottomSheet内的padding设置，直接移除SDK默认添加的底部空白：

showModalBottomSheet(
  context: context,
  builder: (context) {
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(padding: EdgeInsets.zero),
      child: ListView(
        // 你的列表项
      ),
    );
  },
);

3. 关闭BottomSheet的安全区域自动适配

调用showModalBottomSheet时，设置useSafeArea: false，阻止SDK自动添加底部安全区域内边距：

showModalBottomSheet(
  context: context,
  useSafeArea: false,
  builder: (context) => YourBottomSheetWidget(),
);

如果需要保留顶部安全区域，可以在BottomSheet的内容顶部手动添加padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top)。

4. 替换ListView为SingleChildScrollView（适合短列表）

若列表内容较少，用SingleChildScrollView包裹Column，更灵活控制底部空间：

SingleChildScrollView(
  child: Column(
    children: [
      // 你的列表项
    ],
  ),
)

验证说明 #

上述方案在指定的Flutter版本范围内测试有效，核心是调整iOS平台安全区域与BottomSheet、ListView的适配逻辑，消除SDK默认产生的多余空白。

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