How to create a loading Screen in Flutter?

Question

I added firestore and autologin with google to my app. So now when the user starts the app he get for a few seconds a grey screen. How can I create a loading screen, so that the user see that something happen instead of having a grey screen?

My code when starting the app looks like this:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  FireBaseHandler handler = new FireBaseHandler();
  GoogleSignIn _googleSignIn = GoogleSignIn();
  print("Debug 1");
  _googleSignIn.isSignedIn().then((logged) async => {
        print("Debug 2" + logged.toString()),
        if (!logged)
          {
            print("Debug 3"),
            runApp(MyApp(screen: WelcomeScreen())),
          }
        else
          {
            print("Debug 4"),
            _googleSignIn.signInSilently().then((user) => {
                  print(user.toString()),
                  handler
                      .is_user_registered(user.email.toString())
                      .then((value) => {
                            print("Debug 5"),
                            print(value.docs[0].data().toString()),
                            UserManager.userdata = value.docs[0].data(),
                            runApp(MyApp(screen: NavBar())),
                          })
                })
          }
      });
}

Answer 1

You should move the async calls into the MyApp widget and use a FutureBuilder to wait for the results.

You then show the loading indicator when the data is null.

Check out this update to your code:

import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({Key key}) : super(key: key);

  FireBaseHandler handler = new FireBaseHandler();
  GoogleSignIn _googleSignIn = GoogleSignIn();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilder<bool>(
        future: _googleSignIn.isSignedIn(),
        builder: (BuildContext context, AsyncSnapshot<bool> signInSnapshot) {
          if (signInSnapshot.data == null) {
            return Scaffold(
              body: Center(
                child: CircularProgressIndicator(),
              ),
            );
          } else {
            bool isLoggedIn = signInSnapshot.data;

            if (!isLoggedIn) {
              return WelcomeScreen();
            } else {
              return FutureBuilder<GoogleSignInAccount>(
                  future: _googleSignIn.signInSilently(),
                  builder: (_,
                      AsyncSnapshot<GoogleSignInAccount>
                          signInSilentlySnapshot) {
                    if (signInSilentlySnapshot.data == null) {
                      return Scaffold(
                        body: Center(
                          child: CircularProgressIndicator(),
                        ),
                      );
                    } else {
                      GoogleSignInAccount user = signInSilentlySnapshot.data;
                      return FutureBuilder(
                          future:
                              handler.is_user_registered(user.email.toString()),
                          builder: (_, isUserRegisteredSnapshot) {
                            if (isUserRegisteredSnapshot.data == null) {
                              return Scaffold(
                                body: Center(
                                  child: CircularProgressIndicator(),
                                ),
                              );
                            } else {
                              var value = isUserRegisteredSnapshot.data;
                              UserManager.userdata = value.docs[0].data();
                              return NavBar();
                            }
                          });
                    }
                  });
            }
          }
        },
      ),
    );
  }
}