Flutter - 使用 firebase 集合填充列表

Question

我有一个消息列表，我想用 firebase 集合填充 init。

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。

如何在我的聊天屏幕页面初始化时使用来自我的 firestore 集合的数据填充 _messages 数组？

Answer 1

如果您只需要在一个 ListView 中显示来自 firestore 集合的所有消息，那么也许您会喜欢 StreamBuilder 小部件。你可以这样做：

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 变量。