如何在 Firestore 中使用 Flutter（Web 应用）流构建器

Question

我看到几个关于 Flutter for mobile 的问题和答案，它们使用如下流构建器：

body: new StreamBuilder(
  stream: Firestore.instance.collection("collection").snapshots(),
  builder: (context, snapshot) {
    ...

我正在尝试在 web 上的 Flutter 上做同样的事情，但在我的配置中，snapshots() 方法是未知的，在运行时会产生异常（并事先发出 vscode 警告）。为什么？我的设置不正确吗？

我已经按照我在这里和其他地方找到的这些步骤进行操作：

1) 在 pubspec.yaml 中包含 firebase 作为依赖项

dependencies:
  flutter:
    sdk: flutter
  firebase: ^6.0.0

2) 在 index.html 正文标签中包含 firestore js 脚本：

<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>
<script src="main.dart.js" type="application/javascript"></script>

3) 在 main.dart 中，导入 firebase.dart 文件（使用给出的建议 here，尽管我不确定上面的哪个步骤让我可以访问这个包。如果不是的话，我是一个颤抖的 nube '不明显）

import 'package:flutter/material.dart';
import 'package:firebase/firebase.dart' as fb;
import 'package:firebase/firestore.dart' as fs;

按照这些步骤，我可以让这段代码工作......

void main() {
  if (fb.apps.length == 0) {
    try {
      fb.initializeApp(
        apiKey: "mike",
        authDomain: "myauthdomain",
        databaseURL: "mydburl",
        projectId: "myproductid",
        storageBucket: "mystoragebucket",
      );
    } catch(e) {
      print(e);
    }
  }

  fs.Firestore store = fb.firestore();
  fs.CollectionReference ref = store.collection("MyCollection");
  ref.onSnapshot.listen((querySnapshot) {
    querySnapshot.docs.forEach((doc) {
      print(doc.data());  // this works!!
    });
  });
  runApp(MyApp());
}

但是，正如我之前提到的，让流构建器工作，所有建议都表明我可以通过说...来获取快照流...

class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new StreamBuilder(
      stream: fb.firestore().collection('MyCollection').snapshots(),
      ...

我在 web 上运行的包似乎没有任何类似于 firestore 集合引用上的 snapshots 方法（或属性）的东西。有人能直截了当吗？

Answer 1

当我尝试创建一个使用大量 StreamBuilders 的 Flutter 移动应用程序的 Web 版本时，我遇到了同样的问题。以下对我有用：

Pubspec.yaml 依赖项：

  firebase_web: ^5.0.9
  firebase_core: ^0.4.3+2

在您的代码中：

import 'package:firebase_web/firestore.dart';
import 'package:firebase_web/firebase.dart';

body: new StreamBuilder(
  stream: firestore().collection('collection').onSnapshot,
  builder: (context, snapshot) {
...

下面我列出了一个列表，其中包含到目前为止我从 Flutter 移动应用程序到 Flutter Web 应用程序时遇到的变化：

• documents = docs 如snapshot.data.docs.length
• documents() = doc() 如firestore().collection('foo').doc('bar')
• reference = ref 如snapshot.ref
• data = data() 如snapshot.data()
• 来自 Firestore 的方法 setData = set
• 来自 Firestore 的方法 updateData = update(data:{'yourKey': 'yourValue',})

希望这能有所帮助！

Answer 2

querySnapshot.docs 属性返回List<DocumentSnapshot>，而stream 属性需要stream，其中流中的每个项目都是一个列表。

我只需要使用适用于 iOS/Android 的 FlutterFire 库，但它应该看起来像这样：

Stream<List<DocumentSnapshot>> getStream() async* {
  fb.firestore().collection("MyCollection").onSnapshot.listen((querySnapshot) {
    yield querySnapshot.docs;
  }
}