Retrieving Data

This page guides you on how to retrieve data from the Firestore Database (Cloud Firestore). Here's what we'll cover:

Before You Begin:

Understand how to structure the Firebase Database.
Finish the steps in the Firebase Setup for your project.
Set up a Collection.
Add data to the collection.

Querying a collection

Querying a collection allows you to get a list of documents and show them in your app using scrollable widgets such as ListView, GridView, Column, Row, and StaggeredView.

Firestore Queries on a Column/Row can cause performance issues if the number of documents is >15. In that case, we recommend using a ListView or GridView instead.

To query a collection manually, such as clicking a button or submitting a form, consider using the Query Collection action.

To show a list of documents (each representing a single item), let's take an example of a Todo app and build a page with ListView that looks like the below:

Querying a collection and displaying it in UI comprises of the following steps:

Designing a page (skip this if you already have a page designed)
Querying a collection on a ListView
Showing data in UI elements

1. Designing a page

Use the ListView and ListTile widgets to design a page that looks like the following:

2. Querying a collection on a ListView

To query a collection on a ListView:

Select the ListView widget. Make sure to choose the ListView widget, not the ListTile.
Click on the Backend Query tab (on the right side of your screen).
Set the Query Type to Query Collection.
Set the Collection you want to query.
Set the Query Type to List of Documents.
Optional: You can restrict the number of results by specifying the Limit.
Optional: By default, the query results update automatically when changes are made to the collection. To load the results just once and prevent automatic updates, select the 'Single Time Query' option.
Click Confirm twice.

3. Showing data in UI elements

See how to show the actual data value in a ListTile.

Filtering a collection query

Sometimes, you might need to filter a list based on a condition. For example, you might want to show only incomplete Todo items on the main listing.

To add a filter when querying a collection:

Select the widget on which you want to display the filtered results. e.g., ListView.
Click on the Backend Query tab (on the right side of your screen).
Query a collection as per the instructions here. Skip if you have already done so.
Scroll down and click on the + Filter button at the bottom
Find the Field Name, click on the Unset, and select a field on which you would like to apply the filter.
Find the Relation dropdown, click on the Unset, and choose the relation amongst the list.
Find the Value property and set it to an appropriate value.
Click Confirm.

Select a filter relation that aligns with your specific needs. For instance, if you wish to display only incomplete todos, you can create a field named 'isDone,' set the relation to 'Equal To,' and define the value as 'False.' Another example would be to showcase users older than 30; in this case, you'd create a 'Age' field, set the relation to 'Greater Than,' and specify the value as 30.

Ordering a collection query

You might want to show your list based on a specific order. For example, you could show a Todo list in order of due date.

To specify the order:

Select the widget on which you want to display the filtered results. e.g., ListView.
Click on the Backend Query tab (on the right side of your screen).
Query a collection as per the instructions here. Skip if you have already done so.
Scroll down and click on the + Order By button at the bottom
Find the Field Name, click on the Unset, and select the field which you would like to choose for ordering.
Find Order dropdown, click on the Unset, and choose the order either Increasing or Decreasing.
Click Confirm.

Choose the order based on your requirements. For instance, if you want to display Todo items sorted by their due dates, simply set the Field Name to date and the Order to Increasing.

Querying a document

In many cases, you might need to display the details of a single document. Querying a document allows you to get a single document data from inside the collection.

For instance, let's see an example where you wish to showcase the details of a user (the one who created a Todo item) on a separate page.

Querying a document and displaying it in UI consists of the following steps:

Designing a page (skip this if you already have a page designed)
Querying a document on a page or widget
Showing data in UI elements

1. Designing a page

Use the Column, CircleImage, and Text widgets to design a page that looks like the following:

Passing Data: Make sure to define the parameter on a page that holds data of Type DocumentReference (a reference to a single document in a collection). Also, pass the parameter from the previous page. You can follow the instructions for passing the data from one page to another here.

To query a document on a page or widget:

Click on the Backend Query tab (on the right side of your screen).
Set the Query Type to Document from Reference.
Scroll down to find the Collection dropdown and set it to your collection.
Now provide the record reference, i.e., page parameter in this case.
Optional: By default, the query results update automatically when changes are made to the collection. To load the results just once and prevent automatic updates, select the Single Time Query option.
Click Confirm.

3. Showing data in UI elements

See how to show data in Image and Text widget.

Querying count

It's often useful to know the number of documents that match a certain set of criteria without actually retrieving the matching documents themselves. This is where count queries come in.

The advantage of using count queries over full queries (which return the actual documents) is that they are much faster and more efficient, making them a more practical option for retrieving the number of matching documents in extensive collections.

Let's build an example that shows the unread notifications count for the logged-in user. Here's how it might look:

The steps to build such an example are:

1. Query notifications count

To query notifications count:

Select the widget or a page and query the collection for which you want to count documents (e.g., notifications).
While querying a collection, select the Query Type to Count.
You can add a filter to retrieve a specific set of documents (e.g., retrieving notifications only for the logged user and are unread).

2. Display notifications count

After querying the notifications count, you can display it on any widget—for example, Badge widget in this case.

To display notifications count:

Select the Badge widget, move to the properties panel and click Set from Variable for Text property.
From the Set from Variable menu, select the [collection_name] Count (e.g., notifications Count).

You can also use the notifications count to show or hide a widget—for example, show the badge only if counts are greater than zero; otherwise, hide it.

To do that:

Navigate to the widget property that allows you to show/hide widget. For example, Show Badge property in this case and click Set from Variable.
Set the source to Conditions > Single Condition.
Set the First Value to [collection_name] Count (e.g., notifications Count), the operator to Greater Than, and Second Value to 0.

Retrieving List/Array fields

In your collection, you might have a field that stores multiple values of the same data type. For instance, consider a field named 'accessory' with its field type set to 'List' and data type set to 'String,' which stores a list of accessory names. In FlutterFlow, this type of field is referred to as a List/Array Field.

See here how to add multiple items in a field.

Let's build an example that shows the sub-items added inside the Todo. Here's how it looks:

The 'List' field with values looks like the following in FlutterFlow and Firebase:

Retrieving List/Array field includes the following steps: