Flutter-用Firebase集合填充列表 [英] Flutter - fill list with firebase collection

问题描述

我有一个列表，我想用firebase集合在初始化时填充该消息.

I have a list of messages that I want to fill on init with a firebase collection.

import 'package:flutter/material.dart';
import 'package:my_first_flutter_app/chatmessage.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:logging/logging.dart';
final Logger log = new Logger('ChatScreen');

class ChatScreen extends StatefulWidget {
  @override
  State createState() => new ChatScreenState();
}

class ChatScreenState extends State<ChatScreen> {
  final TextEditingController _chatController = new TextEditingController();
  final List<ChatMessage> _messages = <ChatMessage>[];

  @override
  Widget build(BuildContext context) {

    return new Column(
      children: <Widget>[
        new Flexible(
          child: ListView.builder(
            padding: new EdgeInsets.all(8.0),
            reverse: true,
            itemBuilder: (_, int index) => _messages[index],
            itemCount: _messages.length,
          ),
        ),
        new Divider(
          height: 1.0,
        ),
        new Container(decoration: new BoxDecoration(
          color: Theme.of(context).cardColor,
        ),
          child: _chatEnvironment(),)
      ],
    );
  }
}

我试图这样做:

@override
  Widget build(BuildContext context) {
    Firestore.instance
        .collection('chats')
        .document('ROOM_1')
        .collection("messages")
        .getDocuments()
        .then((snap) {
      return new Column(
         ....

但是我需要返回一个小部件，而这种尝试会返回一个Future.

but I need to return a Widget, while this attempt returns a Future.

如何在聊天屏幕页面的初始化中使用来自Firestore集合的数据填充_messages数组?

How I can fill the _messages array with data coming from my firestore collection on the initialization of my chat screen page?

推荐答案

如果您只需要在firestore集合的ListView中显示所有消息，那么您可能会喜欢StreamBuilder小部件.您可以执行以下操作:

If you just need to display all messages in a ListView from the firestore collection, then maybe you'll love the StreamBuilder widget. You can do something like this:

return new Column(
  children: <Widget>[
    new Flexible(
      child: StreamBuilder(
        stream: Firestore.instance.collection('chats').document('ROOM_1').collection('messages').snapshots(),
        builder: (context, snapshot){
          if (!snapshot.hasData){
            return Container(
              child: Center(
                child: Text("No data")
              )
            );
          }

          return ListView.builder(
            padding: EdgeInsets.all(8.0),
            reverse: true,
            itemCount: snapshot.data.documents.length,
            itemBuilder: (_, int index) {
              return ChatMessage(text: snapshot.data.documents[index]["messageField"]); //I just assumed that your ChatMessage class takes a parameter message text
            }
          );        
        }
      )

    ),
    new Divider(
      height: 1.0,
    ),

    ...

请注意，在此示例中，我没有使用_messages变量.

Note that in this example, I didn't use the _messages variable.

这篇关于Flutter-用Firebase集合填充列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！