三星Z Fold4折叠设备中Dialog与Circular Progress Indicator居中显示求助

在三星Z Fold4这类折叠设备上，默认showDialog可能会因为屏幕适配逻辑问题，导致弹窗或Circular Progress Indicator只显示在单侧屏幕。以下是几种实用的解决方法：

1. 用Center强制包裹+获取完整屏幕尺寸 #

直接用Center组件包裹弹窗内容，同时通过MediaQuery拿到整个折叠屏的尺寸，确保弹窗基于全屏居中：

showDialog(
  context: context,
  builder: (context) {
    final fullScreenSize = MediaQuery.of(context).size;
    return Center(
      child: SizedBox(
        width: fullScreenSize.width * 0.75, // 按需设置弹窗宽度比例
        child: AlertDialog(
          title: const Text("提示"),
          content: const Text("这是适配折叠屏的居中弹窗"),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text("确认"),
            ),
          ],
        ),
      ),
    );
  },
);

对于Circular Progress Indicator，直接用Center包裹即可：

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (context) => const Center(
    child: CircularProgressIndicator(),
  ),
);

2. 重写Dialog的insetPadding属性 #

默认Dialog的insetPadding在折叠屏上可能限制了弹窗的可用范围，手动设置对称内边距，让弹窗能在全屏范围内居中：

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      insetPadding: const EdgeInsets.symmetric(horizontal: 20), // 左右留固定边距
      title: const Text("标题"),
      content: const Text("内容区域"),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text("关闭"),
        ),
      ],
    );
  },
);

3. 确保context层级正确 #

如果你的触发按钮在嵌套的Widget里，可能拿到的context只对应折叠屏的单侧区域，用Builder组件包裹触发逻辑，获取根context的屏幕信息：

Builder(
  builder: (rootContext) {
    return ElevatedButton(
      onPressed: () {
        showDialog(
          context: rootContext,
          builder: (context) => const Center(
            child: CircularProgressIndicator(),
          ),
        );
      },
      child: const Text("显示加载框"),
    );
  },
);

额外注意 #

• 尽量使用Flutter 3.0及以上版本，官方对折叠屏的适配支持更完善
• 如果需要处理安全区域，可以结合MediaQuery.of(context).padding调整弹窗的位置，避免被状态栏、导航栏遮挡

内容的提问来源于stack exchange，提问作者Sachin Kumar Rajput