How to add CircularProgressIndicator to Firebase login?

Question

I have a login page that is connected to Firebase. When I am logging in, I want to display a CircularProgressIndicator until login is a success. How do I add that?

Login function:

  void signIn(String email, String password) async {
    if (_formKey.currentState!.validate()) {
      await _auth
          .signInWithEmailAndPassword(email: email, password: password)
          .then((_userDoc) => {
                checkUserType(_userDoc.user!.uid),
              })
          .catchError((e) {
        Fluttertoast.showToast(
          timeInSecForIosWeb: 3,
          gravity: ToastGravity.CENTER,
          msg: "The email or password is invalid. Please check and try again.",
        );
      });
    }
  }

Login button:

    final loginButton = Material(
      elevation: 5,
      borderRadius: BorderRadius.circular(30),
      color: Color(0xFF003893),
      child: MaterialButton(
          padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
          minWidth: 300,
          onPressed: () {
            signIn(emailController.text, passwordController.text);
          },
          child: Text(
            "Login",
            textAlign: TextAlign.center,
            style: TextStyle(
                fontSize: 16, color: Colors.white, fontWeight: FontWeight.bold),
          )),
    );

Answer 1

Using SmartDialog.showLoading() from the flutter_smart_dialog package at the beggining of your signIn method and SmartDialog.dismiss() after signIn is done should do it. Plus, you can also use the optional parameters to customize the dialog look and message it shows.

Answer 2

First of all install the package by flutter pub add flutter_smart_dialog then, add these two lines in MaterialApp as parameters.

 Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [FlutterSmartDialog.observer],
      builder: FlutterSmartDialog.init(),

finally add SmartDialog.showLoading() before await and SmartDialog.dismiss() after await

onPressed: () async {
            if (_formKey.currentState!.validate()) {
                SmartDialog.showLoading(
                    msg: "loading",
                    background: Colors.black54,
                );
            await _authService
            .loginWithEmailAndPassword(
                _email.value.text,
                _password.value.text,
            )
           .then((user) {
               if (user != null) {
                   SmartDialog.dismiss();
                   Navigator.pushReplacementNamed(
                   context, '/home');
        }