Flutter Web中如何让CircularProgressIndicator在AlertDialog中居中显示

问题原因 #

你遇到的垂直居中失效问题来源于两个配置遗漏：

• Stack组件默认使用StackFit.loose适配规则，尺寸只会匹配内部子组件的最小大小，也就是和你的表单Column高度一致，没有撑满AlertDialog的内容可用区域，就算加了Center也只能在Column的高度范围内居中。
• 你当前代码里的CircularProgressIndicator没有嵌套Center组件，本身没有对齐规则。

修复方案 #

只需要对代码做两处修改即可：

1. 给Stack添加fit: StackFit.expand属性，让Stack撑满AlertDialog的内容区域
2. 给CircularProgressIndicator外层嵌套Center组件，实现双轴居中
3. （可选）给AlertDialog添加constraints限制最大宽高，避免Web端弹窗拉伸过度

修改后完整代码 #

AlertDialog(
 scrollable: true,
 // 可选：限制弹窗最大宽高，适配Web端多尺寸屏幕
 constraints: const BoxConstraints(maxWidth: 500, maxHeight: 650),
 content: Stack(
  // 新增属性：让Stack撑满父组件可用空间
  fit: StackFit.expand,
  children: [
    Column(
      children: [
        Text(
          'Join  Us',
          style: TextStyle(
            fontWeight: FontWeight.w800,
            fontSize: 24.0,
            color: Colors.grey.shade800,
          ),
        ),
        SizedBox(height: 20.0),
        SocialBtn(),
        SizedBox(height: 20.0),
        Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                onChanged: (value) {
                  name = value;
                },
                keyboardType: TextInputType.name,
                decoration: kRegistrationTextFiledDeco.copyWith(
                  labelText: 'Name',
                ),
              ),
              SizedBox(height: 10.0),
              TextFormField(
                onChanged: (value) {
                  email = value;
                },
                keyboardType: TextInputType.emailAddress,
                decoration: kRegistrationTextFiledDeco.copyWith(),
              ),
              SizedBox(height: 20.0),
              TextFormField(
                onChanged: (value) {
                  password = value;
                },
                keyboardType: TextInputType.visiblePassword,
                obscureText: true,
                decoration: kRegistrationTextFiledDeco.copyWith(
                  labelText: 'Password',
                ),
              ),
              SizedBox(height: 30.0),
              Container(
                width: 400.0,
                height: 40.0,
                child: ElevatedButton(
                  onPressed: () async {
                    await registrationLogic.validateSignupFields(
                        name, email, password);
                    Navigator.pop(context);
                  },
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(
                        Theme.of(context).primaryColor),
                  ),
                  child: Text('Create an Account'),
                ),
              ),
              SizedBox(height: 10.0),
            ],
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'By Continuing you accept Anrifo\'s',
              style: TextStyle(
                fontWeight: FontWeight.w600,
                color: Colors.grey.shade500,
                fontSize: 12,
              ),
            ),
            SizedBox(width: 10.0),
            TextButton(onPressed: () {}, child: Text('Terms & Conditions'))
          ],
        ),
        SizedBox(height: 10.0),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Already a member?',
              style: TextStyle(
                fontWeight: FontWeight.w500,
                fontSize: 13.0,
              ),
            ),
            SizedBox(width: 10.0),
            TextButton(
              onPressed: () {
                Navigator.pop(context);
                registrationDialog.showDialogs('sign_in');
              },
              child: Text(
                'Sign In',
                style: TextStyle(
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
          ],
        ),
      ],
    ),
    Visibility(
      // 记得绑定你的加载状态变量控制显隐
      visible: isLoading,
      // 新增Center实现双轴居中
      child: Center(
        child: CircularProgressIndicator(),
      ),
    ),
  ],
);

原问题运行效果 #

内容的提问来源于stack exchange，提问作者Syed Irfan Hussaini