Flutter showDialog在平板上无法居中显示问题求助

问题重现代码 #

showDialog(
        context: context,
        barrierDismissible: false,
        // barrierLabel: 'barrierLabel',
        builder: (BuildContext context) {
          return Center(
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
          );
});

问题原因 #

这不是函数bug，是Flutter遵循Material Design大屏适配规范的默认行为：平板等大屏设备上，showDialog和showModalBottomSheet会默认将弹窗显示在屏幕一侧（通常是左侧），目的是适配大屏交互逻辑，避免小尺寸弹窗居中显得违和。而showBottomSheet本身是从底部贯穿整个屏幕宽度弹出的组件，所以视觉上是居中的。

解决方法 #

1. 让showDialog弹窗居中显示 #

可以通过两种方式修改默认布局：

方法一：自定义Dialog并设置对齐属性

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (BuildContext context) {
    return Dialog(
      alignment: Alignment.center, // 强制居中
      backgroundColor: Colors.transparent, // 去掉默认对话框背景
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    );
  },
);

方法二：用AlertDialog清除默认内边距

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (BuildContext context) {
    return AlertDialog(
      insetPadding: EdgeInsets.zero, // 移除默认的大屏适配内边距
      contentPadding: EdgeInsets.zero,
      backgroundColor: Colors.transparent,
      content: Center(
        child: Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
      ),
    );
  },
);

2. 实现覆盖整个界面的提示框 #

直接用SizedBox.expand让弹窗占满屏幕即可：

showDialog(
  context: context,
  barrierDismissible: false,
  barrierColor: Colors.black54, // 可选：设置背景半透明遮罩
  builder: (BuildContext context) {
    return SizedBox.expand(
      child: Container(
        color: Colors.white, // 全屏背景色
        child: Center(
          child: Text("这里是全屏提示内容"),
        ),
      ),
    );
  },
);

3. 修正showModalBottomSheet在平板上的位置 #

如果需要让showModalBottomSheet全屏显示，可开启滚动控制并设置约束：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  constraints: BoxConstraints.expand(height: MediaQuery.of(context).size.height),
  builder: (context) {
    return Container(
      color: Colors.blue,
      child: Center(child: Text("全屏底部弹窗")),
    );
  },
);

内容的提问来源于stack exchange，提问作者白余烁