Flutter升级后Bottom Sheet显示不全问题排查与修复咨询

一、升级是否会影响Bottom Sheet？ #

是的，两者升级都可能对Bottom Sheet的布局产生影响：

• Flutter 3.12.0的变化：官方调整了showModalBottomSheet的安全区域处理逻辑，尤其是当isScrollControlled: true时，Bottom Sheet的布局计算规则有更新，旧版本中useSafeArea的适配行为在新版本中可能不再生效。
• auto_route 7.4.0的变化：该版本对路由上下文的管理做了优化，若Bottom Sheet在auto_route管控的页面中弹出，路由包装后的上下文可能导致MediaQuery获取的安全区域参数异常，进而影响Bottom Sheet的显示。

二、修复底部弹窗仅部分显示的问题 #

针对你提供的代码，可通过以下几种方案解决：

方案1：手动在Builder中包裹SafeArea #

放弃依赖showModalBottomSheet的useSafeArea参数，直接在builder返回的内容外层手动添加SafeArea，确保内容适配安全区域：

await showModalBottomSheet<void>(
  context: context,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  builder: (context) {
    return SafeArea(
      child: Container(
        color: Colors.red,
        height: 200,
        width: MediaQuery.of(context).size.width,
      ),
    );
  }
);

方案2：添加ViewInsets Padding适配滚动控制模式 #

当设置isScrollControlled: true时，Bottom Sheet会响应系统视图偏移（如键盘弹出），添加MediaQuery.viewInsets的padding可避免内容被挤压：

await showModalBottomSheet<void>(
  context: context,
  isScrollControlled: true,
  useSafeArea: true,
  backgroundColor: Colors.transparent,
  builder: (context) {
    return Padding(
      padding: MediaQuery.of(context).viewInsets,
      child: Container(
        color: Colors.red,
        height: 200,
        width: MediaQuery.of(context).size.width,
      ),
    );
  }
);

方案3：检查auto_route路由上下文 #

若使用auto_route的路由页面存在自定义MediaQuery或上下文包装，可尝试使用原始导航上下文获取正确的安全区域参数：

final originalContext = Navigator.of(context).context;
await showModalBottomSheet<void>(
  context: originalContext,
  isScrollControlled: true,
  useSafeArea: true,
  backgroundColor: Colors.transparent,
  builder: (context) {
    return Container(
      color: Colors.red,
      height: 200,
      width: MediaQuery.of(originalContext).size.width,
    );
  }
);

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