How to implement CircularProgressIndicator in Flutter - flutter

Question

I am trying to implement a CircularProgressIndicator when waiting user to finish their authentication process, here's the code, I am using Firebase as the auth backend
Future<void> signIn() async {
if (_formKey.currentState.validate()) {
new Loading();
_formKey.currentState.save();
try {
final user = await FirebaseAuth.instance
.signInWithEmailAndPassword(email: _email, password: _password);
if (user != null) {
final FirebaseUser user = await auth.currentUser();
print('success login');
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => Home(user: user),
));
}
} catch (e) {
print(e);
}
}
}
how to implement the circularprogressindicator into the code?

Answer 1

CircularProgressIndicator can be implemented in UI with a condition.If you want to implement it in some area of your page you can use boolean to make it work like this:
bool showCircular = false;
Future<void> signIn() async {
if (_formKey.currentState.validate()) {
new Loading();
_formKey.currentState.save();
setState(() {
showCircular=true;
});
try {
final user = await FirebaseAuth.instance
.signInWithEmailAndPassword(email: _email, password: _password);
if (user != null) {
final FirebaseUser user = await auth.currentUser();
setState(() {
showCircular=false;
});
print('success login');
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => Home(user: user),
));
}
} catch (e) {
print(e);
}
}
}
Now anywhere in your UI add this widget:
showCircular ? CircularProgressIndicator() : SizedBox(),
Recommended way is using an AlertDialog to show progress indicator. Here is an example with AlertDialog.To open Dialogs you need context so take BuildContext as a parameter and call signIn(context); from sign in button.We will call dialog using openLoadingDialog function and when sign in is completed we will pop it using Navigator.of(context).pop();
Future<void> signIn(BuildContext context) async {
if (_formKey.currentState.validate()) {
new Loading();
_formKey.currentState.save();
openLoadingDialog(context, 'Signing In...');
try {
final user = await FirebaseAuth.instance
.signInWithEmailAndPassword(email: _email, password: _password);
if (user != null) {
final FirebaseUser user = await auth.currentUser();
Navigator.of(context).pop();
print('success login');
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => Home(user: user),
));
}
} catch (e) {
print(e);
}
}
}
Paste this dialog anywhere in your app.You can call it by passing context and message you want to show.
openLoadingDialog(BuildContext context, String text) {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) => AlertDialog(
content: Row(children: <Widget>[
SizedBox(
width: 30,
height: 30,
child: CircularProgressIndicator(
strokeWidth: 1,
valueColor: AlwaysStoppedAnimation(Colors.black)
)
),
SizedBox(width: 10),
Text(text)
]),
)
);
}