无法在我的颤振应用程序中从 Cloud Firestore 读取数据

Question

我尝试将我的 Flutter 应用与 Cloud Firestore 集成。在一个页面上，在应用程序中，我只想从云存储中读取数据并将其打印在该页面上。我是新手，对制作后端知之甚少，所以我尝试了一些来自 youtube 的教程，还阅读了一些关于 StackOverflow 的文章，但我仍然无法从云 Firestore 中读取数据。所以我认为我在某个地方犯了一个错误。以下是我对应用所做的所有 sn-ps 和更改。

这就是我的 Firestore 数据的样子：

  [1]: https://i.stack.imgur.com/lPZtx.png

这是我想从 Firestore 云打印数据的页面。

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:cloud_firestore/cloud_firestore.dart';

class ListPage extends StatefulWidget {
  @override
  _ListPageState createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {
  Future getPosts() async {
    var firestore = FirebaseFirestore.instance;

    QuerySnapshot qn = await firestore.collection("events").get();

    return qn.docs;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
        future: getPosts(),
        builder: (_, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: Text(
                'Loading...',
              ),
            );
          } else if (snapshot.connectionState == ConnectionState.active) {
            return ListView.builder(
              itemCount: 2,
              itemBuilder: (_, index) {
                return ListTile(
                  title: Text(
                    snapshot.data[index].data['name'],
                  ),
                );
              },
            );
          } else {
            return Container();
          }
        },
      ),
    );
  }
}

这些是我的应用程序的依赖项，

dependencies:
  flutter:
    sdk: flutter
  url_launcher:
  cloud_firestore: ^2.3.0
  firebase_core: ^1.3.0
  firebase_analytics: ^5.0.2
  firebase_auth: ^2.0.0

由于 null 安全性，我也遇到了错误。所以我决定通过更改 pubspec.yaml 文件中的环境来禁用 null 安全性

environment:
  sdk: ">=2.11.0 <3.0.0"

在为页面编写代码时，我从这个 youtube 教程中获得了帮助：- https://www.youtube.com/watch?v=6uBjMFoyT-I

整天都在努力完成这项工作，因此非常感谢任何帮助。

Answer 1

FutureBuilder 未处于活动状态，但已完成

更新您的状况

 else if (snapshot.connectionState == ConnectionState.done &&
              snapshot.data != null) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (_, index) {
                return ListTile(
                  title: Text(
                    snapshot.data![index].data['name'],
                  ),
                );
              },
            );

Answer 2

尝试将Text 小部件中的代码更改为如下内容：

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

从 DocumentSnapshot 访问数据时，必须使用 .data() 方法访问，不要忘记包含括号。