How to fetch data from cloud firestore in flutter? - database

Question

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.
My coding
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/");
}),
],
),
);
}
}
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.

Answer 1

First of all you have to change your firestore database as below
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;
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;
}
Then call this function inside initState function.
#override
void initState() {
super.initState();
fetchAllContact().then((List list) {
setState(() {
contacts = list;
});
});
}
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...

Answer 2

flutterfire now have a good walk through for that. Please refer to this section for fetching data from firestore https://firebase.flutter.dev/docs/firestore/usage/#collections--documents