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:+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/");
          }),    
          
        ],
      ),
    );
  }
}

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