Flutter-> Listile和Streambuilder

时间:2020-06-05 19:14:57

标签: firebase flutter dart firebase-realtime-database

class Messages extends StatelessWidget {
 const Messages ({Key key}) : super(key: key);

 @override
Widget build(BuildContext context) {
return StreamBuilder(
  stream: Firestore.instance.collection("messages").snapshots(),
  builder: (context, snapshot) {
    if (snapshot.hasError) {
      return Text("Errror ${snapshot.error}");
    }
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    }
    return ListView(
      children: snapshot.data.documents
          .map<Widget>((doc) => ListTile(
                title: Text(doc['name']),
                subtitle: Text(doc['message']),
              ))
          .toList(),
    );
  },
);
}
}

大家好,我们可以从Firebase中提取数据。我们可以打印到Debugprint。但是,当我们尝试使用列表在屏幕上打印时,会出现错误。你能帮我吗?

enter image description here

2 个答案:

答案 0 :(得分:0)

如错误所示,您需要使用ListTile小部件包装Material小部件:

children: snapshot.data.documents
          .map<Widget>((doc) => Card(child: ListTile(
                title: Text(doc['name']),
                subtitle: Text(doc['message']),
              )))
          .toList(),

答案 1 :(得分:0)

如果您阅读了错误提示,则可能会找到答案。 在颤动材质中,通常必须将小部件放置在其他一些小部件之上。就像在水泥地板上铺瓷砖一样。因此混凝土为瓷砖提供了基础。

您所缺少的是,列表视图不在基础材料窗口小部件的顶部。进行修复,只需将它们包装在脚手架或任何类似的基础小部件中即可。如果您使用的是脚手架,请将其用作根窗口小部件。

像这样

Widget build(BuildContext context) {
  return Scaffold(
      body : //Your widget
    )