How to center CircularProgressIndicator inside a AlertDialog - Flutter Web

Question

I'm making flutter web app in which i am using alert dialog for sign in or sign up and it is pretty much done i want to add a CircularProgressIndicator in the center of my AlertDialog. I have used Center widget to align it center but it is only making it self center horizontally not vertically. I have also wrap the Center widget inside a Expanded but it is same.

This is my code :

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(),
    ),
  ],
);

Output:

Answer 1

You need to Wrap your CircularProgressIndicator inside Center

and remove scrollable: true from AlertDialog()

So, your code should look like something this,

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(),
       ), 
    ),
  ],
);