Flutter:在第一次加载

时间:2018-04-10 11:47:32

标签: dart google-cloud-firestore flutter preload offline-caching

我已将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),
                  )),
            );
          },
        );
      },
    );
  }
}

3 个答案:

答案 0 :(得分:2)

我遇到了类似的情况。对我来说,解决方案是使用FutureBuilder而非const Text('')

从磁盘加载数据

换句话说,您的结构应为:

  • StreamBuilder
    • hasData为假时
      • FutureBuilder
        • hasData为假时
          • 显示一个CircularProgress
        • hasData为真时
          • 显示磁盘数据
    • hasData为真时
      • 显示在线数据

对于首次使用的用户,将显示CircularProgress,然后显示磁盘中的数据,然后显示在线数据。如果没有加载在线数据(没有网络),则用户将继续查看磁盘数据。

答案 1 :(得分:1)

可以在再次添加之前检查是否已经缓存了任何数据。

Tensor Programming也发现了这个扑动的信息YouTube视频有用Making Use of Utility Plugins for Dart's Flutter Framework,特别是连接状态部分。

答案 2 :(得分:0)

会这样做吗? Haven还没有尝试过,但是下个月在离线的国家公园应用程序中做了类似的尝试。

Firestore.instance.collection('<collection>').document().setData(
        {
          '<field>': '<data>',
        },
      );

使用cloud firestore插件&gt; https://github.com/flutter/plugins/tree/master/packages/cloud_firestore