Flutter StreamBuilder<QuerySnapshot> 和构建列表不起作用

Question

我想从 firebase 数据库创建数据列表，但它没有显示在屏幕上。即使没有错误消息，所以我不知道如何弄清楚。

这是我的 StreamBuilder 代码：

return StreamBuilder<QuerySnapshot>(
      stream: _firestore.collection('Goals').orderBy('timestamp').snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return const Center(
            child: CircularProgressIndicator(
              backgroundColor: lightHoney,
            ),
          );
        } else {
          final goals = snapshot.data?.docs;
          List<GoalComb> goalDatas = [];
          for (var goal in goals!) {
            final goalTitle = goal.get('goalTitle');
            final goalWriter = goal.get('writer');
            final goalCompleted = goal.get('goalCompleted');
            final goalTime = goal.get('timestamp');

            final goalComb = GoalComb(
                goalTitle: goalTitle,
                goalWriter: goalWriter,
                goalCompleted: goalCompleted,
                goalStart: goalTime);
            goalDatas.add(goalComb);
          }
          return Expanded(
            child: ListView(
              padding:
                  const EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),
              children: goalDatas,
            ),
          );
        }
      },
    );

以下是GoalComb代码：

class GoalComb extends StatelessWidget {
  const GoalComb({
    super.key,
    required this.goalTitle,
    required this.goalWriter,
    required this.goalCompleted,
    required this.goalStart,
  });

  final String goalTitle;
  final String goalWriter;
  final bool goalCompleted;
  final int goalStart;

  @override
  Widget build(BuildContext context) {
    int goalIndex = goalStart + 1;
    return Padding(
      padding: const EdgeInsets.only(
        left: 25.0,
        right: 25.0,
        top: 25.0,
      ),
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          padding: const EdgeInsets.all(24.0),
        ),
        onPressed: () {
          Navigator.of(context).push(MaterialPageRoute(
              builder: (context) => HoneycombScreen(
                    goalComb: GoalComb(
                      goalTitle: goalTitle,
                      goalWriter: goalWriter,
                      goalCompleted: goalCompleted,
                      goalStart: goalIndex,
                    ),
                  )));
        },
        child: Column(
          children: [
            Text(
              goalTitle,
            ),
            Text(
              '$goalIndex',
            )
          ],
        ),
      ),
    );
  }
}

我正在研究聊天应用程序。所以我复制了在聊天屏幕上显示消息气泡的代码方式。但这个案例行不通。模拟器上只有白屏。

下面是我的 Firebase 数据库

Answer 1

即使没有错误消息，所以我不知道如何弄清楚。

这很可能是因为您的构建器忽略了快照中的错误。你应该永远处理

snapshot.hasError

，一个简单的方法是这样的：

builder: (context, snapshot) {
  if (snapshot.hasError) return Text('ERROR: ${snapshot.error}'); // 👈
  if (!snapshot.hasData) {
    ...