In my app, I have a login page connected to Firebase. I can successfully log in but when logging in, I want to display a CircularProgressIndicator until login is a success.

  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) {
        print('Error');
        );
      });
    }
  }

CodePudding user response：

create a isLoading variable, set its state to true at the start of the sign-in, and false after the promise has been fulfilled. then show the CircularProgressIndicator while isLoading = true

CodePudding user response：

This will replace login button with CircularProgressIndicator while loading.

  void signIn() async {
    setState(() {
      isLoading = true;
    });

    Future.delayed(Duration(seconds: 1)).then((value) {
      /// loginOperationhere
 
     //end of login set false, also include on catch method
      setState(() {
        isLoading = false;
      });
    });
  }

  bool isLoading = false; // on state class level 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        isLoading
            ? CircularProgressIndicator()
            : ElevatedButton(
                onPressed: () {
                  signIn();
                },
                child: Text("login"),
              )
      ],
    ));
  }
}

CodePudding user response：

Try below code hope its helpful to you.

Create bool variable

   bool _isLoading = false;

Your Widget:

 Center(
    child: !_isLoading
        ? Container(
            width: MediaQuery.of(context).size.width,
            height: 50.0,
            padding: EdgeInsets.symmetric(horizontal: 15.0),
            margin: EdgeInsets.only(top: 15.0),
            // ignore: deprecated_member_use
            child: ElevatedButton(
              child: Text(
                'Sign In',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
                textAlign: TextAlign.center,
              ),
              onPressed: () {
                // Your Login function call
                setState(() {
                  _isLoading = true;
                });
              },
            ),
          )
        : CircularProgressIndicator(),
  ),

Your Widget using Center:

 !_isLoading
      ? Center(
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: 50.0,
            padding: EdgeInsets.symmetric(horizontal: 15.0),
            margin: EdgeInsets.only(top: 15.0),
            // ignore: deprecated_member_use
            child: ElevatedButton(
              child: Text(
                'Sign In',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
                textAlign: TextAlign.center,
              ),
              onPressed: () {
                // Your Login function call
                setState(() {
                  _isLoading = true;
                });
              },
            ),
          ),
        )
      : Center(
          child: CircularProgressIndicator(),
        ),

Your result screen before pressed on button ->

Your result screen after button pressed->