Flutter Edge-to-Edge模式下，如何让模态底部面板显示在系统导航栏上方

方案1：开启useSafeArea自动适配安全区域 #

showModalBottomSheet自带useSafeArea参数，设置为true后，底部面板会自动避开系统安全区域（包括底部导航栏），无需手动计算内边距。

示例代码：

showModalBottomSheet(
  context: context,
  useSafeArea: true,
  builder: (context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: const [
        ListTile(title: Text('选项1')),
        ListTile(title: Text('选项2')),
      ],
    );
  },
);

方案2：手动添加底部内边距适配导航栏 #

通过MediaQuery获取系统导航栏的高度，给底部面板内容添加对应内边距，确保内容不被导航栏覆盖。

示例代码：

showModalBottomSheet(
  context: context,
  builder: (context) {
    return Padding(
      padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: const [
          ListTile(title: Text('选项1')),
          ListTile(title: Text('选项2')),
        ],
      ),
    );
  },
);

方案3：自定义约束限制面板高度 #

如果需要更精细的布局控制，可以通过ConstrainedBox限制底部面板的最大高度，避免其延伸到导航栏下方。

示例代码：

showModalBottomSheet(
  context: context,
  builder: (context) {
    final navBarHeight = MediaQuery.of(context).padding.bottom;
    return ConstrainedBox(
      constraints: BoxConstraints(
        maxHeight: MediaQuery.of(context).size.height - navBarHeight,
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: const [
          ListTile(title: Text('选项1')),
          ListTile(title: Text('选项2')),
        ],
      ),
    );
  },
);

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