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

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()

stream: Ref.snapshots(),
builder: (context, AsyncSnapshot<QuerySnapshot> snapshot){
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>[
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700
else if(snapshot.hasError){
return Text(snapshot.error.toString());
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!




Flutter Expert | Cloud Enthusiast | Full Stack Developer | .NET Developer |Coach and Trainer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A little python-ldap tutorial

Images rendered with WebGL

Application Security Ain’t Complicated

User Inputs

Asynchronous Processing in Celery.

Optimizing Swift Performance

Accelerating Zonda — Workday’s Data Streaming Platform

Serverless at re:Invent 2020 — hot takes #1

Dynamics 365 Online connection with C# console application

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yogita Kumar

Yogita Kumar

Flutter Expert | Cloud Enthusiast | Full Stack Developer | .NET Developer |Coach and Trainer

More from Medium

How to integrate In-App Purchase in Flutter (iOS)

Let’s discuss BLOC state management for Flutter

Communicate Between Flutter and Native Android and iOS Code Using Platform Channel

Person on laptop

App Localization in Flutter