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

Posted 2023-02-23

【中文标题】如何在flutter中从云Firestore中获取数据？

【英文标题】：How to fetch data from cloud firestore in flutter?

【发布时间】：2021-07-17 11:30:30

【问题描述】：

我想在 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:[phone]");
            ,
          ),
          
          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 数据库，还创建了电话、电子邮件、网站等字段。现在我只想知道如何使用我的编码在我的应用中显示该集合。

【问题讨论】：

能否发一份详细文件里面的截图。因为我想看看你是如何在其中放置字段的。

当然..我加了，请检查一下..

我将字段添加为字符串类型

好的，我去看看。

【参考方案1】：

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

【讨论】：

谢谢你，伙计！我会阅读你发送的完整文件，然后我会尝试..

【参考方案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)),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          );
                        
                        ),
                  )

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

【讨论】：

我认为这将帮助您以某种方式实现您的目标。

@suppa98, 如何在 firestore 数据库中构建 Step1？

我添加的数据已经被之前的数据覆盖了。