flutter - 如何使用流提供程序(颤振)显示加载屏幕?
问题描述
我正在使用流提供程序来传递用户数据,并且加载时间很短,同时它显示了错误的页面或红色的错误屏幕。如何在加载时显示加载页面。我想我必须添加未来的构建器,但我不知道该怎么做。
class UserData {
String uid;
UserData(this.uid);
Stream<UserModel> get getUserData{
return FirebaseDatabase.instance.reference().child('users').child(uid).onValue.map((e) {
return UserModel(e.snapshot.key, e.snapshot.value['name'],e.snapshot.value['Email']);
});
}
}
class MainPage extends StatefulWidget {
const Mainpage({Key key}) : super(key: key);
@override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
@override
Widget build(BuildContext context) {
return StreamProvider.value(
value: UserData(user.uid).getUserData,
initialData: null,
child: Home(),);
}
class Home extends StatefulWidget {
const Home({Key key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
final userData = Provider.of<UserModel>(context, listen: false);
if(user == null){
return Offer();
}else {
return Customer();
}
}
}
解决方案
您应该为此使用 StreamBuilder。看看这个例子:
class UserData {
String uid;
UserData(this.uid);
Stream<UserModel> get getUserData{
return FirebaseDatabase.instance.reference().child('users').child(uid).onValue.map((e) {
return UserModel(e.snapshot.key, e.snapshot.value['name'],e.snapshot.value['Email']);
});
}
}
class LoadingPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const Text('Loading...');
}
}
class Page extends StatelessWidget {
final String msg;
const Page(this.msg);
@override
Widget build(BuildContext context) {
return Text(msg);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: StreamBuilder<String?>(
stream: UserData('some id').getUserData,
builder: (context, snapshot) {
return snapshot.data == null
? LoadingPage()
: Page(snapshot.data ?? '');
}),
);
}
}
推荐阅读
- excel - 将二维数组作为 VBA 中的子参数传递
- python - How can I add a "dynamic" AREA attribute to a polyline using ezdxf?
- excel - Excel VBA 程序太大用户窗体
- magnolia - 在 Magnolia 中创建自定义字段(Magnolia Java 开发新手)
- css - CSS 多列避免中断
- python - Pandas 优化两列的日期时间比较
- intellij-idea - Intellij IDEA 向左/向右移动元素(Ctrl+Alt+Shift+Left/Right)在 Ubuntu 18.01 上不起作用
- c - 在C中将负十进制转换为二进制
- ios - 我在哪里可以找到官方的 iOS 布局边距文档?
- kubernetes - 具有特定用户权限的 Azure 磁盘的持久卷声明