首页 > 解决方案 > 出现数据剂量,我只有白屏

问题描述

我构建了一个聊天应用程序,我尝试从 firebase 调用数据以显示在屏幕上,但只出现白屏 iam 仍在学习颤振并使用 firestore_cloud

在此处输入图像描述

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

 class ChatScreen extends StatelessWidget {


  @override
 Widget build(BuildContext context) {
 CollectionReference users = FirebaseFirestore.instance
    .collection('chats/lTHEN8VkO7uVAtbeY25R/messeges');
 return Scaffold(
  body: StreamBuilder(
    stream: users.snapshots(),
    builder: (ctx, code) {
      if (code.connectionState == ConnectionState.waiting) {
        return Center(
          child: CircularProgressIndicator(),
        );
       }
        final documents = code.data.documents;
      return ListView.builder(
        itemBuilder: (ctx, index) => Container(
          child: Text(documents[index]['text']),
          padding: EdgeInsets.all(8),
        ),
        itemCount: documents.length,
        );
       },
       ),
      floatingActionButton: FloatingActionButton(
     onPressed: () {},
    child: Icon(Icons.add),
      ),
    );
    }
    }      

标签: androidfirebasefluttergoogle-cloud-firestore

解决方案


尝试这个,


import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
CollectionReference users = FirebaseFirestore.instance
    .collection('chats/lTHEN8VkO7uVAtbeY25R/messeges');
 class ChatScreen extends StatelessWidget {


  @override
 Widget build(BuildContext context) {
 
 return Scaffold(
  body: StreamBuilder(
    stream: users.snapshots(),
    builder: (context, snapshot){
      if (snapshots.connectionState == ConnectionState.active &&
          snapshots.hasData) {
        print(snapshots.data);
        return ListView.builder(
          itemCount: snapshots.data.length,
          itemBuilder: (BuildContext context, int index) {
           var doc=snapshots.data[index];
            Map data= doc.data; // this is your data which is probably a map
            return Text(
              data[index]['text']
            );
          },
        );
      } else {
        return Center(child: CircularProgressIndicator());
      }
       },
       ),
      
    );
    }
    }      

推荐阅读