如何在Flutter的showDialog中创建含文本容器并实现文本正确显示

问题原因 #

你当前的代码直接在showDialog的builder中返回Center组件，没有遵循Flutter弹窗的布局规范——showDialog的builder期望返回一个Dialog（或其子类如AlertDialog）组件。直接返回Center会导致布局不受弹窗约束控制，出现显示异常；而在Center外层添加Scaffold是错误的，因为Scaffold是页面级容器，会破坏弹窗的布局结构。

修复方案 #

你需要用Dialog或AlertDialog组件包裹居中的文本内容，以下是两种可行的实现方式：

方式一：使用Dialog组件（自定义性更强）

showDialog(
  context: context,
  barrierColor: Colors.blueGrey.shade50.withOpacity(0.5),
  barrierDismissible: true,
  builder: (ctx) {
    return WillPopScope(
      onWillPop: () async => false,
      child: const Dialog(
        backgroundColor: Colors.transparent, // 可选：移除默认弹窗背景
        child: Center(
          child: Text('Loading'),
        ),
      ),
    );
  },
);

方式二：使用AlertDialog组件（快速实现标准弹窗）

showDialog(
  context: context,
  barrierColor: Colors.blueGrey.shade50.withOpacity(0.5),
  barrierDismissible: true,
  builder: (ctx) {
    return WillPopScope(
      onWillPop: () async => false,
      child: AlertDialog(
        content: const Center(
          child: Text('Loading'),
        ),
        contentPadding: const EdgeInsets.symmetric(vertical: 32, horizontal: 24), // 调整内边距优化显示
      ),
    );
  },
);

额外优化建议 #

如果需要让Loading文本更美观，还可以添加圆形背景、加载指示器等，示例如下：

child: Dialog(
  backgroundColor: Colors.white,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
  child: const Padding(
    padding: EdgeInsets.all(16.0),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        CircularProgressIndicator(strokeWidth: 2),
        SizedBox(width: 12),
        Text('Loading'),
      ],
    ),
  ),
)

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