如何将 Flutter（Web 应用程序）流生成器与 Firestore 一起使用

Question

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

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

我试图在 flutter for web 上做同样的事情，但在我的配置中，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，虽然我不确定上面的哪一步让我访问了这个包。我'我是一个颤动的核，如果它不明显的话）

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

querySnapshot.docs 属性 returns 一个 List<DocumentSnapshot> 而你需要一个 stream 为 stream 属性 where流中的每个项目都是一个列表。

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

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

Answer 2

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

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 网络应用程序遇到的变化：

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',})

希望对您有所帮助！

如何将 Flutter（Web 应用程序）流生成器与 Firestore 一起使用

How to use Flutter (web app) stream builder with Firestore

firebase

flutter

google-cloud-firestore

flutter-web