How to fetch data from cloud firestore in flutter?

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.

Solution

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...