Flutter For Web 从 Firestore 获取数据答案

【问题标题】：Flutter For Web Fetching data from FirestoreFlutter For Web 从 Firestore 获取数据
【发布时间】：2020-04-01 07:42:43
【问题描述】：

如何使用 firebase 模块检索数据？

这是我的课：

import 'package:firebase/firebase.dart';
import 'package:firebase/firestore.dart';
import 'dart:convert' as json;
import 'package:projecthub/models/User.dart';

class DatabaseService {

  static final Firestore store = firestore();
  CollectionReference users = store.collection('users');
  CollectionReference projects = store.collection('projects');

  DatabaseService();

  void getUsers (){
    print("fetching data...");
    users.onSnapshot.listen((querySnapshot) {
      print(querySnapshot);
    });

  }

  void createNewUser(String uid, String username, int reputaion, List followers){

  }

}

这是 index.html：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>projecthub</title>
  <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-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-storage.js"></script>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>

<body>
  <script>
    document.addEventListener('keydown', function (event) {
      if (event.code == 'Tab') {
        event.preventDefault();
      }
    });
    var perf = firebase.performance();
  </script>
</body>

</html>

这是 pubsec.yaml：

dependencies:
  flutter:
    sdk: flutter
  firebase: ^7.1.0

我正在 main.dart 中初始化应用程序

assert((){
    initializeApp(
      apiKey: "API KEY",
      authDomain: "AUTH DOMAIN",
      databaseURL: "DB URL",
      projectId: "Project Id",
      storageBucket: "storage bucket",
      messagingSenderId: "messaging id");
      return true;
  }());

我已尝试遵循 firebase 模块文档，但没有找到答案。
我正在使用 firebase：^7.1.0 已经尝试过 cloud_firestore 并没有找到答案。
如果您对此主题有任何疑问，请随时提问，谢谢。

【问题讨论】：

这应该可以工作 - 它不适合你怎么办？你打电话给getUsers？你调试过你的代码吗？
@creativecreatorormaybenot 它打印“获取数据”，但它不打印我不知道为什么的查询快照
您是否将库添加为<script> 标签并初始化您的应用程序？
@creativecreatorormaybenot yes I did

标签： firebase flutter dart flutter-web

【解决方案1】：

试试下面的代码。它会工作

// 1
// FirestoreGet

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

class FirestoreGet {

    static Future<List<Users>> getUsers() async {
      fs.Firestore store = firestore();
      fs.CollectionReference ref = store.collection("users");

      List<Users> usersAry = List();

      ref.onSnapshot.listen((querySnapshot) {
      querySnapshot.docChanges().forEach((change) {
         if (change.type == "added") {
           // Do something with change.doc
          print("Count : ${querySnapshot.size}");
         }
      });

      querySnapshot.docs.forEach((d) {
        usersAry.add(Users.fromJson(d.data(), d.id));
      });
      return usersAry;
    });
  }
}

// 2
// User Model

class Users {
   String first_name;
   String last_name;
   String email_address;

  Users({
    String first_name = '',
    String last_name = '',
    String email_address = '',
  }) {
    this.first_name = first_name;
    this.last_name = last_name;
   this.email_address = email_address;
  }

  Users.fromJson(Map<String, dynamic> jsonMap, String documentId) {
     first_name = jsonMap['first_name'];
     last_name = jsonMap['last_name'];
     email_address = jsonMap['email_address'];
  }

 Map<String, dynamic> toMap() {
   return <String, dynamic>{
     'first_name': this.first_name,
     'last_name': this.last_name,
     'email_address': this.email_address,
  };
 }
}

// 3
// main.dart

import 'package:firebase/firebase.dart' as fb;

void main(){
  assert((){
    fb.initializeApp(
      apiKey: "API KEY",
      authDomain: "AUTH DOMAIN",
      databaseURL: "DB URL",
      projectId: "Project Id",
      storageBucket: "storage bucket",
      messagingSenderId: "messaging id");
      return true;
  }());
   runApp(Home());
}


// 4
// Home Page

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return HomeState();
  }
}

 class HomeState extends State<Home> {

  @override
  Widget build(BuildContext context) {
    //getting screen size
  }

  @override
  void initState() {
    super.initState();

     var userAry = FirestoreGet.getUsers();
     print(userAry);
  }
}

// 5
// index.html 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>

  <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-firestore.js"></script>

  <script>
    document.addEventListener('keydown', function (event) {
      // console.log('event key'+event.code);
      if (event.code == 'Tab') {
        event.preventDefault();
      }
    });
    var perf = firebase.performance();

</script>
</body>
</html>

// 6
// pubspec.yaml

 dependencies:
  flutter:
    sdk: flutter
  firebase: ^7.1.0

【讨论】：

它不打印querySnapshot，我没有尝试用户解析。