dart - 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?
解决方案
如果您只需要在 Firestore 集合中的 ListView 中显示所有消息,那么您可能会喜欢 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
变量。
推荐阅读
- javascript - 如何为具有不同类名的元素重复 Javascript 表达式
- php - 找不到子字符串最后一次出现的位置
- kotlin - 如何输出服务器已启动
- javascript - Uncaught (in promise) SyntaxError: Unexpected end of JSON input - undefined auth token
- java - 从文件读取时如何添加到 Java LinkedList?
- ruby-on-rails - 在 PSQL 或 .... 中存储 LARGE PDF?
- typescript - 是否可以编写一个通用的 enum-member-name getter?
- angular - 打字稿/角度不是函数错误
- python - xlsxwriter:将 'xl_col_to_name(col)' 解析为 worksheet.set_column() 中使用的值
- css - 将鼠标悬停在背景 DIV (CSS) 上时更改按钮颜色