How to Display Progress Wheel/Bar between Flutter transitions? - flutter

Question

I've created a custom Login Page that looks and works the way I intended. I'm having trouble figuring out how and where in my code to display a progress indicator while it authenticates the Firebase User and pulls the users name, photo, or placeholders. Also, if authentication fails, where and how should an alert be displayed. Here is my current code...
Future<Null> _loginButton() async {
_email = _emailController.text.toString().replaceAll(" ", "");
_password = _passController.text.toString().replaceAll(" ", "");
//_username = _nameController.text.toString().replaceAll(" ", "");
if (_email != null && _password != null) {
try {
await FirebaseAuth.instance
.signInWithEmailAndPassword(email: _email, password: _password);
final FirebaseUser currentUser = await _auth.currentUser();
final userid = currentUser.uid;
currentUserId = userid;
FirebaseDatabase.instance
.reference()
.child('users/$userid')
.onValue
.listen((Event event) {
if (event.snapshot.value == null) {
imageString = "placeholder";
name = _username;
} else if (event.snapshot.value != null) {
imageString = event.snapshot.value['image'];
name = event.snapshot.value['displayName'];
}
fb.child('users/$userid').set({
'displayName': name,
'image': imageString,
'uid' : userid.toString()
});
}).onDone(() {
Navigator.pushNamed(context, '/menu');
Main.uid = userid;
});
} catch (error) {
}
} else {}
}

Answer 1

Check this a functional example from my project to implement CircularProgressIndicator between flutter transitions.
class LoginPage extends StatefulWidget {
#override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
bool isLoading = false;
#override
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: isLoading
? Column(
children: <Widget>[
CircularProgressIndicator(),
Divider(
height: 20,
color: Colors.transparent,
),
Text("Please wait..."),
],
mainAxisSize: MainAxisSize.min,
)
: MaterialButton(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Image.asset(
'assets/google.png',
width: 25.0,
),
Padding(
child: Text(
"Sign in with Google",
style: TextStyle(
fontFamily: 'Roboto',
color: Color.fromRGBO(68, 68, 76, .8),
),
),
padding: new EdgeInsets.only(left: 15.0),
),
],
),
onPressed: () {
googleUserSignIn().then((user) {
this.setState(() {
//isLoading = false;
// Your task....
});
});
},
color: Colors.white,
elevation: 5,
highlightElevation: 2,
)));
}
Future<FirebaseUser> googleUserSignIn() async {
this.setState(() {
isLoading = true;
});
GoogleSignInAccount googleUser = await Firebase().firebaseGSI.signIn();
GoogleSignInAuthentication googleAuth = await googleUser.authentication;
final AuthCredential credential = GoogleAuthProvider.getCredential(
accessToken: googleAuth.accessToken,
idToken: googleAuth.idToken,
);
FirebaseUser user =
await Firebase().firebaseAuth.signInWithCredential(credential);
return user;
}
}