Flutter 试图显示Firestore中的列表数据会导致抖动中像素溢出

我正试图用以下代码显示firestore中的数据列表：

@override
  Widget build(BuildContext context) {
    // <1> Use FutureBuilder
    return FutureBuilder<QuerySnapshot>(
        // <2> Pass `Future<QuerySnapshot>` to future
        future: FirebaseFirestore.instance.collection('UserNames').get(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            // <3> Retrieve `List<DocumentSnapshot>` from snapshot
            final List<DocumentSnapshot> documents = snapshot.data.docs;
            return ListView(
                children: documents
                    .map((doc) => Card(
                          child: ListTile(
                            title: Text(doc['displayName']),
                            subtitle: Text(doc['plastics'].toString()),
                          ),
                        ))
                    .toList());
          } else if (snapshot.hasError) {
            return Text('Its Error!');
          }
        });
  }

@覆盖
小部件构建（构建上下文）{
//使用FutureBuilder
回归未来建设者(
//把“未来”传给未来
future:FirebaseFirestore.instance.collection（'UserNames'）.get（），
生成器：（上下文，快照）{
if（snapshot.hasData）{
//从快照中检索“列表”
最终列表文档=snapshot.data.docs；
返回列表视图(
儿童：文件
.map（（doc）=>卡片(
孩子：ListTile(
标题：文本（doc['displayName']），
字幕：文本（doc['plastics'].toString（）），
),
))
.toList（））；
}else if（snapshot.hasrerror）{
返回文本（“其错误！”）；
}
});
}

这段代码位于一个名为Scoreboard（）的类中，我试图从另一个名为createdGroupHomePage（）的类中调用该类，如下所示：

@覆盖
小部件构建（构建上下文）{
返回脚手架(
背景颜色：Colors.white，
appBar:appBar(
背景色：调色板。浅绿色，
标题：常量文本（“组主页”），
引导：手势检测器(
onTap:（）{
导航器（上下文）
.push和moveuntil（HomeScreen.route，（route）=>false）；
},
子：图标(
Icons.arrow\u back\u ios，
颜色：颜色，白色，
),
),
),
车身：建造商(
生成器：（上下文）=>容器(
子：列(
mainAxisAlignment:mainAxisAlignment.start，
儿童：[
对齐(
对齐：对齐.center，
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
大小盒子(
身高：50，
),
未来建设者(
future:getGroupName（），
生成器：（\ux，异步快照）{
如果（snapshot.connectionState==
连接状态（正在等待）{
返回中心(
子对象：循环压缩机指示器(
背景色：调色板。浅绿色，
));
}
返回文本（snapshot.data，
样式：TextStyle(
颜色：调色板。浅绿色，字体大小：30）；
},
),
尺寸箱（高度：20），
Scoreboard（），//就在这里，我正在尝试显示列表内容
],
),
),
],
),
),
),
);
}

---

不幸的是，当我进入应用程序中的页面时，它显示像素溢出，但9000左右，我真的不知道该怎么办。我必须将记分板（）包装在某个东西中还是其他东西中？

由于

列表视图

小部件没有设置的高度，因此必须将其包装在具有设置高度的小部件中，才能放置在

列

中。如果希望

列表视图

占用所有剩余空间，可以使用

展开的

小部件将其包装如下：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 50,
            ),
            FutureBuilder(
              future: getGroupName(),
              builder: (_, AsyncSnapshot snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(child: CircularProgressIndicator());
                }
                return Text(snapshot.data,
                    style: TextStyle(fontSize: 30));
              },
            ),
            SizedBox(height: 20),
            Expanded(
              child: Scoreboard(),
            ), // Right here I am trying to display the list contents
          ],
        ),
      ),
    );
  }

@覆盖
小部件构建（构建上下文）{
返回脚手架(
主体：容器(
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
大小盒子(
身高：50，
),
未来建设者(
future:getGroupName（），
生成器：（\ux，异步快照）{
if（snapshot.connectionState==connectionState.waiting）{
返回中心（子项：CircularProgressIndicator（））；
}
返回文本（snapshot.data，
样式：TextStyle（fontSize:30））；
},
),
尺寸箱（高度：20），
扩大(
孩子：记分板（），
)，//就在这里，我正在尝试显示列表内容
],
),
),
);
}

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 50,
            ),
            FutureBuilder(
              future: getGroupName(),
              builder: (_, AsyncSnapshot snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(child: CircularProgressIndicator());
                }
                return Text(snapshot.data,
                    style: TextStyle(fontSize: 30));
              },
            ),
            SizedBox(height: 20),
            Expanded(
              child: Scoreboard(),
            ), // Right here I am trying to display the list contents
          ],
        ),
      ),
    );
  }