如何在 Flutter 中创建加载屏幕？

Dalon 发表于 Dev

达隆

我在我的应用程序中添加了 firestore 和使用谷歌自动登录。所以现在当用户启动应用程序时，他会看到几秒钟的灰色屏幕。如何创建加载屏幕，以便用户看到发生的事情而不是灰屏？

启动应用程序时我的代码如下所示：

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())),
                          })
                })
          }
      });
}

维克多·埃隆莫塞莱

您应该将异步调用移动到MyApp小部件中并使用FutureBuilder等待结果。

然后在数据为空时显示加载指示器。

查看您的代码的此更新：

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();
                            }
                          });
                    }
                  });
            }
          }
        },
      ),
    );
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。