如何在flutter中从云Firestore中获取数据？

Question

我想在 Flutter 中从 Firestore 中获取联系方式，例如电话号码、电子邮件地址、网站 URL 以及社交媒体 URL。我完成了编码以直接在应用程序中显示联系方式，但我需要从 firestore 获取数据，因为如果假设我将来需要更改联系方式，这对我有好处。

我的编码

import 'package:cloud_firestore/cloud_firestore.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: LightColor.white,
      appBar: CustomAppBar(
        isBackButton: true,
        title: customTitleText(
          'Contact us',
        ),
      ),
      body: ListView(
        physics: BouncingScrollPhysics(),
        children: <Widget>[
          HeaderWidget(
            'Feel free to contact us',
            secondHeader: true,
          ),
          SettingRowWidget(
            "Phone",
            vPadding: 0,
            showDivider: false,
            onPressed: () {
              Utility.launchURL(///i want to display this url from firestore///
                  "tel:+918889999888");
            },
          ),
          
          HeaderWidget('Social media'),
          SettingRowWidget("Facebook", showDivider: true, onPressed: () {
            Utility.launchURL( ///i want to display this url from firestore/// 
"https://facebook.com/ecways");
          }),

      HeaderWidget('Website'),
          SettingRowWidget("Open website", showDivider: true, onPressed: () {
            Utility.launchURL( ///i want to display this url from firestore/// 
"https://facebook.com/");
          }),    
          
        ],
      ),
    );
  }
}

我创建了具有集合名称“my_contact”和文档名称“详细信息”的 firestore 数据库，还创建了电话、电子邮件、网站等字段。现在我只想知道如何使用我的编码在我的应用中显示该集合。

Answer 1

flutterfire 现在可以很好地完成此操作。从firestorehttps://firebase.flutter.dev/docs/firestore/usage/#collections--documents获取数据请参考本节

Answer 2

首先你必须改变你的firestore数据库如下

应该有一个名为contacts的数组，里面应该有3张根据你的数据的地图。

然后在你的屏幕类中创建一个列表。

List contacts;

然后创建一个函数来从 firestore 中检索数据。

  Future<List> fetchAllContact() async {
    List contactList = [];
    DocumentSnapshot documentSnapshot =
        await firestore.collection('my_contact').doc('details').get();
    contactList = documentSnapshot.data()['contacts'];
    return contactList;
  }

然后在initState函数中调用这个函数。

  @override
  void initState() {
    super.initState();
    fetchAllContact().then((List list) {
      setState(() {
        contacts = list;
      });
    });
  }

最后将你的 listView 替换为 listViewBuilder。

Container(
                    child: ListView.builder(
                        padding: EdgeInsets.all(10),
                        itemCount: contacts.length,
                        itemBuilder: (context, index) {
                          return CustomTile(
                            mini: false,
                            onTap: () {},
                            title: Text(
                              contacts[index]['headerTitle'] != null
                                  ? contacts[index]['headerTitle']
                                  : '',
                              style: TextStyle(
                                  color: Colors.white,
                                  fontFamily: "Arial",
                                  fontSize: 19),
                            ),
                            subtitle: Text(
                              contacts[index]['value'] != null
                                  ? contacts[index]['value']
                                  : '',
                              style: TextStyle(
                                color: UniversalVariables.greyColor,
                                fontSize: 14,
                              ),
                            ),
                            leading: Container(
                              constraints:
                                  BoxConstraints(maxHeight: 60, maxWidth: 60),
                              child: Stack(
                                children: <Widget>[
                                  CircleAvatar(
                                    maxRadius: 30,
                                    backgroundColor: Colors.grey,
                                    backgroundImage: NetworkImage(
                                        "https://avatars.githubusercontent.com/u/49371842?v=4"),
                                  ),
                                  Align(
                                    alignment: Alignment.bottomRight,
                                    child: Container(
                                      height: 13,
                                      width: 13,
                                      decoration: BoxDecoration(
                                          shape: BoxShape.circle,
                                          color:
                                              UniversalVariables.onlineDotColor,
                                          border: Border.all(
                                              color:
                                                  UniversalVariables.blackColor,
                                              width: 2)),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          );
                        }
                        ),
                  )

我就是这样做的。谢谢...