我有一个连接到 firebase (firestore) 的颤振应用程序。
当用户打开应用程序时，我会检查他是用户类型 1 还是用户类型 2。+ 从网络加载图像等。
但是完成所有这些事情可能需要一秒钟。 制作/实现加载屏幕/启动屏幕的最佳方法是什么，直到所有内容都加载完毕？
谢谢！
【问题讨论】：
当您只加载本地图像并希望预加载它们时，Ashish Shirgave's answer 的替代方法是使用 Future.wait() + precacheImage() + snap.connectionState。
例如。
FutureBuilder(
future: Future.wait([
precacheImage(AssetImage("assets/imageA.png"), context),
precacheImage(AssetImage("assets/imageB.png"), context),
]),
builder: (BuildContext context, AsyncSnapshot snap) {
if (snap.connectionState != ConnectionState.waiting) {
return Center(AssetImage("assets/imageA.png"));
} else {
return Center(child: CircularProgressIndicator());
}
});
【讨论】：
其中一种方法是使用FutureBuilder。我在我的应用程序中使用的代码 sn-p 如下所示
FutureBuilder(
future: _getData(), // the function to get your data from firebase or firestore
builder : (BuildContext context, AsyncSnapshot snap){
if(snap.data == null){
//return loading widget
}
else{
//return the widget that you want to display after loading
}
}
);
AsyncSnapshot 由函数在“未来”中返回，即在本例中为 _getData()。
【讨论】：
我认为最好的选择是FutureBuilder，因为您不知道具体需要多少时间，它会在您加载时显示加载动画
【讨论】：
我的解决方案是定义一个 Widget，它会显示加载动画并同时做一些后台工作。
小部件采用一个代表“加载动画”的小部件和一个将在后台执行的功能。
这取自https://github.com/Ephenodrom/EZ-Flutter。
您可以在https://ez-flutter.de/docs/transition找到文档
import 'package:flutter/material.dart';
///
/// Widget for displaying loading animation and doing background work at the same time.
///
class EzTransition extends StatefulWidget {
EzTransition(this.child, this.toProcess, {this.backgroundColor});
final Function() toProcess;
final Widget child;
final Color backgroundColor;
@override
_EzTransitionState createState() => _EzTransitionState();
}
class _EzTransitionState extends State<EzTransition> {
@override
void initState() {
super.initState();
widget.toProcess();
}
@override
Widget build(BuildContext context) {
return Material(
color: getBackgroundColor(),
child: widget.child,
);
}
Color getBackgroundColor() {
return widget.backgroundColor == null
? Theme.of(context).backgroundColor
: widget.backgroundColor;
}
}
【讨论】：
您可以使用Splashscreen 插件，它提供seconds 来延迟路由到下一页以便您执行检查，它还有一个navigateAfterSeconds，您可以在其中写入您的条件。
例子：
SplashScreen(
seconds: 3,
navigateAfterSeconds: HomePage(),
title: Text('Splash'),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0, color: Colors.blueGrey),),
image: Image.asset('assets/images/icon2.png',),
backgroundColor: Colors.white,
styleTextUnderTheLoader: TextStyle(),
photoSize: 100.0,
loaderColor: Colors.blue,
loadingText: Text('initializing...'),
)
【讨论】：