Flutter:在第一次加载时将数据预加载到 Firestore 本地缓存中
Flutter: Pre-load data into Firestore local cache on the first load
我已将 Cloud Firestore 实施到我的 Flutter 应用程序中并遇到了这个问题:如果应用程序第一次加载时(安装后)没有网络连接,则不会显示任何数据。
我的问题是:即使没有互联网连接,如何使来自 Firestore 的数据在第一次加载时(安装后)显示?我获取数据的代码是这样的:
class QuestionsListState extends State<QuestionsList> {
@override
Widget build(BuildContext context) {
return new StreamBuilder<QuerySnapshot>(
stream: _questionsCollectionReference
.where("category", isEqualTo: _chosenCategory).orderBy("order").snapshots,
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) return const Text('');
final int messageCount = snapshot.data.documents.length;
return new ListView.builder(
itemCount: messageCount,
itemBuilder: (_, int index) {
final DocumentSnapshot document = snapshot.data.documents[index];
return new ListTile(
title: new FlatButton(
onPressed: () {
Navigator.push(context, new MaterialPageRoute(
builder: (BuildContext context) => new AddAnswerDialog(),
fullscreenDialog: true,
));
},
child: new Text(
document['text'],
style: new TextStyle(fontSize: 18.0, color: Colors.blue),
)),
);
},
);
},
);
}
}
这样可以吗?还没有尝试过,但考虑在下个月为离线最初的国家公园应用程序做类似的事情。
Firestore.instance.collection('<collection>').document().setData(
{
'<field>': '<data>',
},
);
使用云 firestore 插件 > https://github.com/flutter/plugins/tree/master/packages/cloud_firestore
可以在再次添加之前检查是否已经缓存了任何数据。
还发现 Tensor Programming 的这个 flutter info YouTube 视频很有用Making Use of Utility Plugins for Dart's Flutter Framework,尤其是连接状态部分。
我运行陷入了类似的境地。我的解决方案是使用 FutureBuilder
而不是 const Text('')
从磁盘加载数据
换句话说,您的结构将是:
- StreamBuilder
- 当
hasData
为假时
- 未来建设者
- 当
hasData
为假时
- 显示
CircularProgress
- 当
hasData
为真时
- 显示磁盘数据
- 当
hasData
为真时
- 显示在线数据
对于初次使用的用户,这将显示 CircularProgress
,然后是磁盘数据,然后是在线数据。如果在线数据加载不出来(没有网络),用户一直看到磁盘数据。
我已将 Cloud Firestore 实施到我的 Flutter 应用程序中并遇到了这个问题:如果应用程序第一次加载时(安装后)没有网络连接,则不会显示任何数据。 我的问题是:即使没有互联网连接,如何使来自 Firestore 的数据在第一次加载时(安装后)显示?我获取数据的代码是这样的:
class QuestionsListState extends State<QuestionsList> {
@override
Widget build(BuildContext context) {
return new StreamBuilder<QuerySnapshot>(
stream: _questionsCollectionReference
.where("category", isEqualTo: _chosenCategory).orderBy("order").snapshots,
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) return const Text('');
final int messageCount = snapshot.data.documents.length;
return new ListView.builder(
itemCount: messageCount,
itemBuilder: (_, int index) {
final DocumentSnapshot document = snapshot.data.documents[index];
return new ListTile(
title: new FlatButton(
onPressed: () {
Navigator.push(context, new MaterialPageRoute(
builder: (BuildContext context) => new AddAnswerDialog(),
fullscreenDialog: true,
));
},
child: new Text(
document['text'],
style: new TextStyle(fontSize: 18.0, color: Colors.blue),
)),
);
},
);
},
);
}
}
这样可以吗?还没有尝试过,但考虑在下个月为离线最初的国家公园应用程序做类似的事情。
Firestore.instance.collection('<collection>').document().setData(
{
'<field>': '<data>',
},
);
使用云 firestore 插件 > https://github.com/flutter/plugins/tree/master/packages/cloud_firestore
可以在再次添加之前检查是否已经缓存了任何数据。
还发现 Tensor Programming 的这个 flutter info YouTube 视频很有用Making Use of Utility Plugins for Dart's Flutter Framework,尤其是连接状态部分。
我运行陷入了类似的境地。我的解决方案是使用 FutureBuilder
而不是 const Text('')
换句话说,您的结构将是:
- StreamBuilder
- 当
hasData
为假时- 未来建设者
- 当
hasData
为假时- 显示
CircularProgress
- 显示
- 当
hasData
为真时- 显示磁盘数据
- 当
- 未来建设者
- 当
hasData
为真时- 显示在线数据
- 当
对于初次使用的用户,这将显示 CircularProgress
,然后是磁盘数据,然后是在线数据。如果在线数据加载不出来(没有网络),用户一直看到磁盘数据。