flutter - 如何在 AlertDialog 中居中 CircularProgressIndicator - Flutter Web

Question

我正在制作 Flutter Web 应用程序，在该应用程序中我使用警报对话框进行登录或注册，我想在我的 AlertDialog 的中心添加一个 CircularProgressIndicator 已经完成了。我使用 Center 小部件将其居中对齐，但它只是使其水平居中而不是垂直居中。我还将 Center 小部件包装在 Expanded 内，但它是相同的。

这是我的代码：

AlertDialog(
 scrollable: true,
 content: Stack(
  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(
      child: CircularProgressIndicator(),
    ),
  ],
);

输出：

标签： flutterflutter-layoutflutter-webflutter-circularprogressindicator

Answer 1

你需要包裹你的CircularProgressIndicator内心Center

scrollable: true并从中删除AlertDialog()

所以，你的代码应该是这样的，

AlertDialog(
 content: Stack(
  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,
                ),
              ),
            ),
          ],
        ),
      ],
    ),
    Center(
       child: Visibility(
          child: CircularProgressIndicator(),
       ), 
    ),
  ],
);