Flutter — Access Data from Cloud Firestore

Cloud Firestore is a NoSQL structured database hosted on cloud and provide enough flexibility and scalability. Cloud Firestore currently has scaling limit around 1 million concurrent connections and approximately 10K operations/sec. It has Collections, documents, fields. On the other side real-time database is giant JSON tree. Data is stored in JSON format.

Using Cloud Firestore in your App.

pre-requisite: Connect existing Flutter app to firebase. if need any details, please refer Quick set up- Integrating Flutter App with Firebase

Step 1: In you Firebase account, choose your project that you want to continue.

Step 2: In left pane, you would see Cloud Firebase. Once you click, it will give prompt to select locked mode or test mode.

Locked mode -private access. Test mode- public access

Let’s continue to Test mode for this illustration:

Step 3: Click Start a collection and give name for your collection.

Step 4 : Now it will ask to create first document, click on auto_id and insert the field name, select data type and value for that field. Click on save.

Step 5: To add another documents just click on Add Document and follow same steps.

you can see multiple document in below screenshot, in case you want to Add field, please click on corresponding label.

Great ! we are ready with our collection now. Let’s follow next steps to view data in your app.

Step 6: Add cloud firsetore dependency in pubspec.yaml

dependencies:
  cloud_firestore: ^0.13.7

Step 7: add below import statement in your code where you want to access collection from cloud firestore.

import 'package:cloud_firestore/cloud_firestore.dart';

Steps 8: Create CollectionReference object to work with database, to retrieve all documents or specific document, mention collection method which takes Collection name as a parameter.

final Ref = Firestore.instance.collection("Countries");

Steps 9: use StreamBuilder widget to access data using stream: Ref.snapshots()

StreamBuilder(
  stream: Ref.snapshots(),
  builder: (context, AsyncSnapshot<QuerySnapshot> snapshot){
    if(snapshot.hasData){
      return Container(
        height: 600,
        child: ListView.builder(
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context,index){
              return Container(
                height: 100,
                child: Card(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(snapshot.data.documents[index].data['CountryName'],
                        style: TextStyle(
                          fontSize: 25,
                          fontWeight: FontWeight.bold
                        ),),
                        Text(snapshot.data.documents[index].data['CapitalName'],
                          style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.w700
                          ),),
                      ],
                    ),
                  ),
              );
            }),
      );
    }
    else if(snapshot.hasError){
      return Text(snapshot.error.toString());
    }
    else{
      return CircularProgressIndicator();
    }
  },
),

StreamBuilder takes two parameters:

1. stream : As name suggest its a stream or you can say as flow or pipe, here we create a stream for snapshot of Countries collection.
2. builder : It actually helps you how your code actual look like with this aynsc snapshot. QuerySnapshot is the results of a query. It can contain zero or more DocumentSnapshot objects.

This returns a widget where you can design how data should be display.

We can check data with if condition, snapshot.hasData, if it doesn’t yet then display CircularProgressIndicator()

Note : In case if you exceptions like,

Exception: Gradle task assembleDebug failed with exit code 1

then, In your app level build.gradle file

1. Increase your minSdkVersion from 16 to 21.
2. Enable multiDex.

defaultConfig {    
  ...
minSdkVersion 21    //copy this line
multiDexEnabled true   //copy this line
}

Find Source code here

Thank you!