如何在 Flutter Web 上使用 StreamBuilder 和 Firestore？

Posted 2023-02-23

技术标签:

【中文标题】如何在 Flutter Web 上使用 StreamBuilder 和 Firestore？【英文标题】：How to use StreamBuilder with Firestore at flutter web? 【发布时间】：2020-03-12 15:51:51 【问题描述】：

我正在使用 Flutter Web 构建网站，但我无法将数据从 Firestore 获取到 StreamBuilder，因为 onSnapshot 不起作用...

我正在使用这个包https://pub.dev/packages/firebase

我的代码：

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

class Playground extends StatefulWidget 
  @override
  _PlaygroundState createState() => _PlaygroundState();


class _PlaygroundState extends State<Playground> 

  @override
  Widget build(BuildContext context) 
    fs.Firestore dataBase = firestore();
    fs.CollectionReference teachersRef = dataBase.collection('teachers');

return Center(
  child: Container(
    width: 700,
    height: 400,
    color: Colors.cyanAccent,
    child: StreamBuilder(
      stream: teste.collection('teachers').onSnapshot,
      builder: (context, snapshot) 
        if (!snapshot.hasData) return Text('Loading...');
        return ListView.builder(
          //itemExtent: 30,
          itemCount: 4,
          itemBuilder: (context, index) 
            return Container(
              width: 10,
              color: Colors.amber,
              child: Text(snapshot.data[index]['name']),
            );
          ,
        );
      ,
    ),
  ),
);

但我得到了这个答案：

'[]' Dynamic call of null. Receiver: Instance of 'QuerySnapshot' Arguments: [0]

有人知道如何在 Flutter web 上正确使用 Firestore 吗？

【问题讨论】：

希望您在index.html 中包含<script> 标签。 testevariable 定义在哪里。我没看到。还可以尝试为流构建器提供初始值。嗨，你有没有让这个工作？每次我使用 onSnapshot 和 snapshot.hasData 时，我都没有从我的集合或文档请求中得到任何回报.. 嗨！是的，我想出了如何使用... 要获取您需要的数据，请键入 snapshot.data.data() 【参考方案1】：

我认为这个问题与最终构建线有关

child: Text(snapshot.data[index]['name']),

快照数据是来自JScript 导入的QuerySnapshot，而不是您正在执行的AsyncQuerySnapshot。

我修改为调用成功

child: Text(snapshot.data.docs[index].get('name')),

【讨论】：

您好，我也面临同样的问题，但您的回答对我不起作用。我无法在 snapshot.data 或 .get('') 之后选择 .docs。每当我尝试使用 StreamBuilder 时，我都会得到一个空白屏幕..【参考方案2】：

您好，您应该使用firestore() 初始化函数。你应该在你的代码中有<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-storage.js"></script> 行，并在你的main.xml中初始化它。示例代码如下：

!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your web app title</title>
</head>
<body>
    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>

    <script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-firestore.js"></script>

    <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

// your main function
void main()
   initializeApp(
      apiKey: "YOUR  API KEY",
      authDomain: "YOUR AUTH DOMAIN",
      databaseURL: "YOUR DATABASE URL",
      projectId: "YOUR PROJECT ID",
      storageBucket: "YOUR STORAGE BUCKET",
      messagingSenderId: "YOUR MESSAGING SENDER ID",
    );
    runApp(MyApp());

使用该库的实际类

import 'package:firebase/firestore.dart';

class FirebaseHandler 
  FirebaseHandler(Firestore firestoreInstance,)
      : _firestore = firestoreInstance ?? firestore(); // firestore() is the default initializer for your firebase APP firestore.
   final Firestore _firestore;

   Stream getCollection(String collection)
      try 
         return  _firestore.collection(collection + "/").onSnapshot;
       catch (e) 
         print('Error retrieving snapshot: $e');
         throw '$e';

【讨论】：

【参考方案3】：

我认为你的问题在这里：

fs.CollectionReference teachersRef = dataBase.collection('teachers');

试试这个：

final teachersRef = Firestore.instance.collection('teachers');

现在您可以使用 teachersRef 获取快照并在您的 StreamBuilder

中使用它

【讨论】：