How to create a loading Screen in Flutter? - 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();
}
});
}
});
}
}
},
),
);
}
}