CODEWITHSUNDEEP
dartflutter
TheUnreal
TheUnreal

Reputation: 24492

Flutter - fill list with firebase collection

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(),)
      ],
    );
  }
}

I tried to do this:

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

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

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

Upvotes: 1

Views: 7092

Answers (1)

Jerome Escalante
Jerome Escalante

Reputation: 4397

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,
    ),

    ...

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

Upvotes: 3

Related Questions