Add CircularProgressIndicatror for login? - firebase

Question

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');
);
});
}
}

Answer 1

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

Answer 2

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

Answer 3

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->