Question

我正在使用波动的网站构建网站，但是由于onSnapshot无法正常工作，所以无法将数据从Firestore提取到StreamBuilder中。

我正在使用此软件包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网站上正确使用Firestore吗？

Answer 1

我认为您的问题在这里：

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

尝试以下方法：

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

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

中使用它

Answer 2

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

!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';
      }
   }
}

Answer 3

我认为该问题与最终的生产线有关

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

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

我修改为成功致电

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

如何在Flutter Web上将StreamBuilder与Firestore结合使用？

3 个答案: