带有Flutter和Firestore的GridView [英] GridView with Flutter and Firestore

问题描述

我正在尝试从云Firestore记录中创建一个简单的GridView.我已经看了很多视频教程，但是都没有成功.这是代码:

I`m trying to make a simple GridView from a cloud firestore record. I've followed a lot of video tutorials but without success. Here's the code:

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

class EventList extends StatefulWidget {
 @override
 EventListState createState() => new EventListState();
}

class EventListState extends State<EventList> {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: Firestore.instance.collection('events_flutter').snapshots(),
  builder: (BuildContext context, DocumentSnapshot snapshot) {
    if (!snapshot.hasData) {
      return Center(child: const Text('Loading events...'));
    }
    return GridView.builder(
      gridDelegate:
          SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      itemBuilder: (BuildContext context, int index) {
        return Text(snapshot['event_name']);
      },
      itemCount: snapshot.data.documents.length,
    );
  },
);}}

这是当悬停在"builder:(BuildContext上下文，DocumentSnapshot快照)"上时的错误消息.有人可以帮助我了解发生了什么事吗?

And this is the error message when hovering on "builder: (BuildContext context, DocumentSnapshot snapshot)". Could anybody help me understand what is going on?

非常感谢.

推荐答案

您应将快照的类型从 DocumentSnapshot 替换为 AsyncSnapshot

...

builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (!snapshot.hasData) {
        return Center(child: const Text('Loading events...'));
    }

    ...

而且，您可能要替换此行:

And also, you might want to replace this line:

return Text(snapshot['event_name']);

对此:

return Text(snapshot.data.documents[index]['event_name']);

这篇关于带有Flutter和Firestore的GridView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！