Flutter Web - 获取 Firestore 集合

Question

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

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

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

下面的代码是显示流生成器和列表视图的片段。在网络模式下，代码卡在 if (!snapshot.hasData) 条件下，只有 returns 文本 'Loading...' 到我的 Chrome 浏览器。在移动应用程序中，它按预期工作，returns 一个包含来自 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 的移动和 web 使用有几点不同，但没有明确的文档。

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

<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 功能。可能存在一些语法差异，但您可以通过一些搜索找到它们。

祝编码顺利！

Flutter Web - 获取 Firestore 集合

Flutter Web - Fetching Firestore collection

firebase

flutter

google-cloud-firestore

flutter-web