Flutter中ModalBottomSheet设置边距左右不一致问题排查

为什么左右边距不一致？ #

showModalBottomSheet 默认会自动适配设备的安全区域（SafeArea），给内容容器添加额外的内边距。当你在内部 Container 设置水平 margin 时，这个自定义边距会和安全区域的内边距叠加，但部分设备的左右安全区域内边距并不对称，最终导致视觉上左右边距看起来不一样。

解决方法 #

方法1：关闭安全区域适配

直接在 showModalBottomSheet 里添加 useSafeArea: false 参数，关闭自动适配安全区域的逻辑，这样你设置的 margin 就能完全生效，左右边距保持一致：

showModalBottomSheet(
  context: context,
  backgroundColor: Colors.transparent,
  useSafeArea: false, // 关闭安全区域适配
  builder: (context) {
    return Container(
      height: 200,
      color: Colors.black,
      margin: EdgeInsets.symmetric(horizontal: 15),
      child: Text('text'),
    );
  },
);

方法2：直接控制容器宽度（替代margin）

如果需要保留安全区域适配，也可以直接计算并设置 Container 的宽度，手动减去左右边距的总和，避免和默认内边距冲突：

showModalBottomSheet(
  context: context,
  backgroundColor: Colors.transparent,
  builder: (context) {
    final screenWidth = MediaQuery.of(context).size.width;
    return Container(
      height: 200,
      width: screenWidth - 30, // 左右各留15的间距
      color: Colors.black,
      child: Text('text'),
    );
  },
);

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