Question

在下面，您可以看到一个代码，我要在其中显示从Flutter中的注册表中收集的数据。注册表格将数据推送到名为“用户”的集合，然后将其他一些文档数据推送为：名称-电子邮件等...

您可以通过XXXX看到，我希望将从Cloud Firestore检索到的数据显示在小部件中：代码下方：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:cloud_firestore/cloud_firestore.dart';



class WelcomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pink,
      body: MainWelcome(),
    );
  }
}

class MainWelcome extends StatefulWidget {
  @override
  _MainWelcomeState createState() => _MainWelcomeState();
}

class _MainWelcomeState extends State<MainWelcome> {

  final databaseReference = Firestore.instance;


  Future<QuerySnapshot> getData() async {
    return await Firestore.instance.collection("user").getDocuments();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: getData(),
      builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          snapshot.data.documents.forEach((element) {
            Center(
              child: Text(
                'Benvenuta ${element.data["name"]}',
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
            );
          });
        } else if (snapshot.connectionState == ConnectionState.none) {
          return Text("No data");
        }
        return Center(child: CircularProgressIndicator());
      },
    );
  }
}

Answer 1

您需要使用FutureBuilder小部件在小部件树中显示数据：

创建一个返回数据的方法：

    Future<QuerySnapshot> getData() async {
    return await Firestore.instance
        .collection("user")
        .where("email", isEqualTo: "email_here")
        .getDocuments();
  }

然后在build()方法中执行以下操作：

          FutureBuilder(
            future: getData(),
            builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                  return ListView.builder(
                    shrinkWrap: true,
                    itemCount: snapshot.data.documents.length,
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(
                        contentPadding: EdgeInsets.all(8.0),
                        title:
                            Text(snapshot.data.documents[index].data["name"]),
                      );
                    });
              } else if (snapshot.connectionState == ConnectionState.none) {
                return Text("No data");
              }
              return CircularProgressIndicator();
            },
          ),

从Cloud Firestore获取数据并将其显示到小部件中

1 个答案: