Flutter: Show loading widget while waiting for Google sign in to complete

Question

When signing in with Google, just before I get to the userInfoPath, the screen goes black and then shows the login page again before moving onto the userInfoPath. I am trying to add the loading widget so it transitions from google login to the userInfoPath nicely but I can either get the loading widget and it stays on that without moving to the UserInfoScreen or I can't get it at all. Help on how to fix this would be great.

Login Screen

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State {
  AuthService auth = AuthService();
  @override
  void initState() {
    super.initState();
    auth.getUser.then(
      (user) { 
        if (user != null) {
         Navigator.pushReplacementNamed(context, SharedStrings.userInfoPath);
        }
      },
    );
  }
  @override
  Widget build(BuildContext context) {
    return SafeArea(
          child: Scaffold(
        backgroundColor: white,
        body: Container(
          padding: Sizes2.edInsAll,
          decoration: const BoxDecoration(),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Image.asset(Strings.imageLogo,
                width: Sizes2.imageWidth,
                height: Sizes2.imageHeight,
              ),
              Text(SharedStrings.planetRescue, style: appName, textAlign: TextAlign.center),
              Text(Strings.liveSustainablySlogan, style: greySubTxt, textAlign: TextAlign.center),
              LoginButton(
                text: Strings.loginWithGoogle,
                icon: FontAwesomeIcons.google,
                color: orangeGrey,
                loginMethod: auth.googleSignIn,
              ),
              Container(
                margin: Sizes1.onlyBot,
                child: FlatButton.icon(
                  padding: Sizes2.edInsAll,
                  icon: const Icon(Icons.email, color: Colors.white),
                  color: orangeGrey,
                  onPressed: () => changeScreen(context, AuthWidget()),
                  label: Expanded(
                    child: Text(Strings.loginWithEmail, style: formalBtnTextSml, textAlign: TextAlign.center),
                  ),
                ),
              ),
  
...

Login Button

class LoginButton extends StatelessWidget {
  final Color color;
  final IconData icon;
  final String text;
  final Function loginMethod;

  const LoginButton({Key key, this.text, this.icon, this.color, this.loginMethod}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: Sizes1.onlyBot,
      child: FlatButton.icon(
        padding: Sizes1.edgInAll,
        icon: Icon(icon, color: Colors.white),
        color: color,
        onPressed: () async {
          var user = await loginMethod();
          if (user != null) {
            Navigator.pushReplacementNamed(context, SharedStrings.userInfoPath);
          }
      ...

Loading widget

class Loading extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: white,
      child: Center(
        child: SpinKitChasingDots(
          color: deepOrange,
          size: Sizes2.loadSz,
        ),
      ),
    );
  }
}

user_12030116 · Answer

first of all create these two methods:

void showDialogue(BuildContext context){
  showDialog(
  context: context,
  builder: (BuildContext context) => Loading(),
); 
}

void hideProgressDialogue(BuildContext context) {
Navigator.of(context).pop(Loading());}

Then in your LoginButton, Replace your:

onPressed: () async {
      var user = await loginMethod();
      if (user != null) {
        Navigator.pushReplacementNamed(context, SharedStrings.userInfoPath);
      }

With:

    onPressed: () async {
        showDialogue(context);
          var user = await loginMethod();
          if (user != null) {
            hideProgressDialogue(context);
            Navigator.pushReplacementNamed(context, SharedStrings.userInfoPath);
          }

Let me know if this worked for you :)

Flutter: Show loading widget while waiting for Google sign in to complete

1 Answers