Question

我看到有关Flutter for mobile的几个使用以下流构建器的问题和答案：

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

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

我遵循了在这里和其他地方找到的这些步骤：

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

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(),
      ...

我在网络上运行的软件包在firestore集合引用上似乎没有snapshots方法（或属性）之类的东西。有人可以让我挺直吗？

Answer 1

当我尝试创建使用大量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) {
...

下面，我提供了一个列表，其中列出了到目前为止我所遇到的从移动应用到移动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;
  }
}

如何在Firestore中使用Flutter（网络应用）流生成器

2 个答案: