如何在 Flutter 中创建加载屏幕?
How to create a loading Screen in Flutter?
我使用 google 添加了 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();
}
});
}
});
}
}
},
),
);
}
}
我使用 google 添加了 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();
}
});
}
});
}
}
},
),
);
}
}