firebase - 在 flutter 中从 Cloud Firestore 获取数据到 ListView

Question

我正在尝试将数据从 firebase 云 firestore 集合(事件)中提取到 ListView 中，我不确定我是否正确地实现了这个，当我运行应用程序时我收到错误“MappedListIterable”不是一个“Widget”类型的子类型。这是我第一次使用 firebase cloud firestore，我真的需要一些帮助来更好地理解这个错误。

这是初始化 ListView 的地方:

    import 'package:flutter/material.dart';
import 'package:rallie_app/utils/event_summary.dart';
import 'package:cloud_firestore/cloud_firestore.dart';


class HomeList extends StatelessWidget {

 Firestore db = Firestore.instance; 



  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: StreamBuilder<QuerySnapshot>(
          stream: Firestore.instance.collection('events').snapshots(),
          builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
           // count of events
            final int eventCount = snapshot.data.documents.length;
            if (snapshot.hasError)
              return new Text('Error: ${snapshot.error}');
            switch (snapshot.connectionState){
              case ConnectionState.waiting:
                return Center(child: CircularProgressIndicator());
              default:
                return new ListView.builder(
                    itemCount: eventCount ,
                  itemBuilder: (context, index) {
                    final DocumentSnapshot document = snapshot.data.documents[index];
                  return  new EventSummary(document);
                  }
                );
            }
          })



    );
  }
}

这些是我希望构建的 ListView 项目:

     import 'package:flutter/material.dart';
import 'package:rallie_app/model/events.dart';
import 'package:rallie_app/ui/detail/detail_page.dart';
import 'package:rallie_app/services/firestore_service.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'dart:async';

class EventSummary extends StatefulWidget {
  //TODO: Event summary constructor with event model class initialized in it

  final DocumentSnapshot event;

  EventSummary(this.event);

  @override
  _EventSummaryState createState() => _EventSummaryState();
}

class _EventSummaryState extends State<EventSummary> {
  @override
  Widget build(BuildContext context) {
    final userThumbnail = new Container(
      margin: EdgeInsets.symmetric(vertical: 16.0),
      alignment: FractionalOffset.centerLeft,
      child: Hero(
        tag: "user-image-${widget.event.data['id']}",
        child: CircleAvatar(
          backgroundImage: AssetImage(widget.event['event_poster_image']),
          // backgroundColor: Colors.white,
          maxRadius: 40.0,
        ),
      ),
    );

    final eventCardContent = Container(
      margin: new EdgeInsets.only(left: 46.0),
      decoration: new BoxDecoration(
        shape: BoxShape.rectangle,
        color: new Color(0xFFFFFFFF),
        borderRadius: new BorderRadius.circular(8.0),
        image: DecorationImage(
          image: AssetImage(widget.event.data['event_image']),
          fit: BoxFit.fill,
        ),
      ),
    );

    Widget _eventValue(){
      return Column(
        children: <Widget>[
          Container(
            height: 150.0,
            margin: const EdgeInsets.symmetric(
              vertical: 16.0,
              horizontal: 24.0,
            ),
            child: new Stack(
              children: <Widget>[
                eventCardContent,
                userThumbnail,
              ],
            ),
          ),
          Container(
            margin: const EdgeInsets.only(left: 70.0, bottom: 20.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  widget.event.data['event_name'],
                  textAlign: TextAlign.start,
                ),
                Row(
                  //crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      widget.event.data['event_date'],
                      textAlign: TextAlign.start,
                    ),
                    SizedBox(
                      width: 110,
                    ),
                    IconButton(
                      icon: Icon(Icons.share),
                      splashColor: Colors.orange,
                      tooltip: 'Share button',
                      onPressed: () =>
                          debugPrint('Share btn tapped'),
                    )
                  ],
                ),
                Text(
                  widget.event.data['event_attending'],
                  textAlign: TextAlign.start,
                ),
              ],
            ),
          )
        ],
      );
    }

    return new GestureDetector(
      onTap: () => Navigator.of(context).push(
            new PageRouteBuilder(
              pageBuilder: (_, __, ___) => new DetailPage(widget.event.data['id']),
              transitionsBuilder:
                  (context, animation, secondaryAnimation, child) =>
                      new FadeTransition(opacity: animation, child: child),
            ),
          ),
      child: StreamBuilder(
          stream: Firestore.instance.collection('events').snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) return Text('Loading data... Please wait');
            return snapshot.data.documents.map(
              (document) => _eventValue()
            );
          }),
    );
  }
}

Answer 1

在您的代码中 - 将 - widget.event['id'] 编辑为 - widget.event.data['id'] & So On 与使用快照变量的其他地方相同...

根据文档 - DocumentSnapshot

A DocumentSnapshot contains data read from a document in your Cloud Firestore database. The data can be extracted with .data()

widget.event 是 - DocumentSnapshot & 读取数据你需要使用 .data 方法。

此外，您遇到的错误是代码:

child: StreamBuilder(
          stream: Firestore.instance.collection('events').snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) return Text('Loading data... Please wait');
            return snapshot.data.documents.map(
              (document) => Column(
                              ......

此处 Builder 期望 Widget 作为返回值而不是“MappedListIterable”-

snapshot.data.documents.map(
                  (document) // is Wrong return value for StreamBuilder.

您需要修改您的代码以在此处返回小部件。