Flutter Web-获取Firestore集合 [英] Flutter Web - Fetching Firestore collection

问题描述

我有一个Flutter移动应用程序，该应用程序确实运行良好，但是当尝试将相同的代码迁移到Flutter Web时，我无法使用从FireStore中获取数据.就像StreamBuilder不想在Web模式下工作，而是仅在移动应用程序模式下工作.

I have a flutter mobile app which works really great, but when trying to migrate the same code to flutter web, I am unable to fetch data from FireStore using . It's like the StreamBuilder does not want to work in web mode, but will work only for mobile app mode.

在dart文件的顶部，我已导入:

At the top of the dart file, I've imported:

'package:cloud_firestore/cloud_firestore.dart'
'package:firebase_auth/firebase_auth.dart'

和下面的代码是显示streambuilder和listview的代码段.在网络模式下，代码陷入 if(！snapshot.hasData)条件，并且仅向我的Chrome浏览器返回文本正在加载...".在移动应用程序中时，它会按预期工作，并返回包含Firestore中所有数据的列表视图.

and the below code, is the snippet showing the streambuilder and listview. In web mode, the code gets stuck at if (!snapshot.hasData) condition and only returns text 'Loading...' to my Chrome browser. While in the mobile app, it works as expected and returns a listview with all data from firestore.

Container(
height: safeBlockVertical * 0.9,
child: StreamBuilder(
                              
  stream: FirebaseFirestore.instance.collection(orgName).snapshots(),
  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
                                
    if (!snapshot.hasData) {return new Text('Loading...');} else {
                                
      return ListView(
        children: snapshot.data.docs.map(
        (DocumentSnapshot document) {
             .
             .
             .
             child: ListTile(
               title: ....
               trailing: ....
               onTap: () {}

最初，我认为index.html中的firebase配置可能是错误的，并且经常摆弄很多.但是后来意识到情况并非如此，因为我能够从Firestore成功登录并获取用户信息而没有任何错误.所以firebase的配置很好，现在我想知道上面的StreamBuilder可能在Flutter Web上不起作用.是这样吗有帮助吗?

Initially I thought the firebase configuration in index.html might be wrong and fiddled around with it a lot. But later realized that that's not the case since I was able to login and fetch user information successfully from firestore without any error. So the firebase configuration is good, now I am wondering that the above StreamBuilder probably does not work on Flutter Web. Is that the case? Any help?

推荐答案

移动和Web使用Firebase在扑朔迷离中有一些区别，但是对此没有明确的文档.

There are a few points that are different between mobile and web usage of firebase in flutter but there is no clear documentation on that.

第一个问题是在创建Web应用程序似乎不起作用时，将firefire脚本导入html中，作为firebase推荐的默认版本.这是我使用过的版本，确实可以使用.

First issue is the import of firebase scripts in the html as the default version recommended by firebase when creating the web app doesn't seem to work. This is a version I have used and it does work.

<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-app.js</script> 
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-storage.js"></script>

第二，您可以在pubspec.yaml文件中使用的软件包有所不同.这是我使用并有效的方法:

Second, the packages you can use in your pubspec.yaml file is a bit different. Here is what I use and does work :

  firebase_web: ^5.0.9

它包括存储和Firestore功能.可能会有一些语法差异，但是您可以通过几次搜索就可以找到有关它们的信息.

It includes storage and Firestore functionalities. There might be a few syntax differences but you can find out about them with a few searches.

祝你好运！

这篇关于Flutter Web-获取Firestore集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！