Flutter Web - 获取 Firestore 集合

Question

我有一个运行良好的 Flutter 移动应用程序，但是当尝试将相同的代码迁移到 Flutter Web 时，我无法使用 .就像 StreamBuilder 不想在 web 模式下工作，但只能在移动应用程序模式下工作。

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

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

和下面的代码，是显示streambuilder和listview的sn-p。在 web 模式下，代码卡在if (!snapshot.hasData) 条件下，仅将文本“正在加载...”返回到我的 Chrome 浏览器。在移动应用程序中，它按预期工作并返回一个列表视图，其中包含来自 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上不起作用。是这样吗？有什么帮助吗？

Answer 1

在 Flutter 中 Firebase 的移动和网络使用有几点不同，但没有明确的文档。

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

<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 文件中使用的包有点不同。这是我使用和工作的：

  firebase_web: ^5.0.9

它包括存储和 Firestore 功能。可能存在一些语法差异，但您可以通过一些搜索了解它们。

祝你编码好运！