Как создать загрузочный экран в Flutter?

# #flutter #authentication #google-cloud-firestore #loading #google-login

Вопрос:

Я добавил firestore и автологин с Google в свое приложение. Так что теперь, когда пользователь запускает приложение, он на несколько секунд получает серый экран. Как я могу создать экран загрузки, чтобы пользователь видел, что что-то происходит, вместо того, чтобы иметь серый экран?

Мой код при запуске приложения выглядит следующим образом:

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

Комментарии:

1. вы можете использовать пакет типа pub.dev/пакеты/flutter_spinkit для отображения загрузки

Ответ №1:

Вы должны переместить асинхронные вызовы в 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();
                            }
                          });
                    }
                  });
            }
          }
        },
      ),
    );
  }
}