如何从Flutter中的Cloud Firestore获取数据? [英] How to fetch data from cloud firestore in flutter?
问题描述
我想获取联系方式，例如电话号码，电子邮件地址，网站网址和社交媒体也从扑朔迷离的消防站发出了URL.我已经完成了编码以直接在应用程序中显示联系人详细信息，但是我需要从firestore中获取数据，因为如果我假设将来需要更改联系人详细信息，对我来说将是一件好事.
I want to fetch contact details like phone number, email address, website url & also social media urls from firestore in flutter. I done coding to show contact details directly in-app but I need to get data from firestore because it will be good for me if suppose i need to change contact details in future.
我的编码
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数据库和文件名称"details"而且我还为电话，电子邮件，网站等创建了字段.现在我只想知道如何使用我的编码在我的应用程序中显示该集合.
I created firestore database with collection name "my_contact" and document name "details" and also i created field for phone, email, website and extra. Now i just want to know how to display that collection in my app with my coding.
推荐答案
首先，您必须按以下方式更改Firestore数据库
First of all you have to change your firestore database as below
应该有一个名为Contacts的数组，并且在其中应该根据您的数据包含3个地图.
There should be array called contacts and inside that there should be 3 maps according to your data.
然后在您的屏幕课程中创建一个列表.
Then create a list in your screen class.
List contacts;
然后创建一个从Firestore检索数据的功能.
Then create a function to retrieve data from firestore.
Future<List> fetchAllContact() async {
List contactList = [];
DocumentSnapshot documentSnapshot =
await firestore.collection('my_contact').doc('details').get();
contactList = documentSnapshot.data()['contacts'];
return contactList;
}
然后在initState函数中调用此函数.
Then call this function inside initState function.
@override
void initState() {
super.initState();
fetchAllContact().then((List list) {
setState(() {
contacts = list;
});
});
}
最后将您的listView替换为listViewBuilder.
Finally replace your listView as a 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)),
),
)
],
),
),
);
}
),
)
这就是我的方法.谢谢...
This is how I did it. Thanks...
这篇关于如何从Flutter中的Cloud Firestore获取数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
