FlutterFlow Docs
Search…
Actions
Retrieving Data
This page describes how to retrieve data from your Firestore collection and document.
Retrieving Data from the Firestore collection and document includes:

Prerequisites

Before getting started with this section:

Querying a collection

Querying a collection allows you to get a list of documents from inside the collection and show them in your app (e.g. in a ListView or Column widget).
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 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:
Todo list
Querying a Collection and displaying it in UI comprises of following steps:
  1. 1.
    ​Designing a page (you can skip this if you already have a page designed)

1. Designing a page

To add a ListView with ListTile widget inside your page:
  • First, drag the ListView widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
  • Drag the ListTile widget from the Base Elements tab and drop it inside the ListView.
Designing a page

2. Querying a collection on a ListView

To query a collection on a ListView:
  • Select the ListView widget from the widget tree or from the canvas area. 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.
  • Scroll down to find the Collection dropdown and set it to your collection.
  • Set the Query Type to List of Documents.
  • (Optional) By default, the result of this query will automatically refresh when the items are added/updated/deleted inside the collection. Checkmark the Single Time Query to load the result only once and not refresh when any updates are made.
  • Click Save.
Querying a collection on a listView

3. Showing data in UI elements

To show the actual data value in a ListTile:
  • Select the ListTile Widget from the widget tree or from the canvas area.
  • Move to property editor and scroll down to the Title section.
  • Click on the Set from Variable text. (This will open a new panel)
    • Find the Source dropdown, click on unset and select the [collection] Record (from ListView) from the list.
    • Under the Available Options, click on Unset and select the field that you wish to show.
    • Click Save.
  • Scroll down to the Subtitle section.
  • Click on the Set from Variable text. (This will open a new panel)
    • Find the Source dropdown, click on unset and select the [collection] Record (from ListView) from the list.
    • Under the Available Options, click on Unset and select the field that you wish to show.
    • Click Save.
Showing data in UI elements

Filtering a collection query

Sometimes you may need to filter a list based on a condition. For example, you may want to show only incomplete Todo items on the main listing.
To add a filter when querying a collection:
  • Select ListView from the widget tree or from the canvas area.
  • 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 and 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 Save.
You may choose a Filter relation based on your requirements. For example, to show only incomplete todos, create a Field called isDone, set the Relation to Equal To, and set the Value to False. Here's another example. For showing only users older than 30, create a Field called Age, set the Relation to Greater Than, and set the Value to 30.
Filtering a collection query

Ordering a collection query

You may 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 ListView from the widget tree or from the canvas area.
  • 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 and 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 Save.
You may choose the order based on your requirements. For example, to show Todo items in order of due date, you should set Field Name to date and Order to Increasing.
Ordering a collection query

Querying a document

In many cases, you may 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 example, you could display the user's details (who created a Todo item) on another page. The user's details can be fetched from the document based on the record reference.
Showing user's details based on user reference
Querying a Document and displaying it in UI consists of the following steps:
  1. 1.
    ​Designing a page (you can skip this if you already have a page designed)

1. Designing a page

To design a page:
  • Create/select the page and give it a name.
  • Select the Column widget and set its Padding to 10 and Cross Axis Alignment to Stretch.
  • Add a CircleWidget widget to show the profile picture.
  • Add another Text widget to show the user name.
  • Add one more Text widget to show the user email.
Create a user details page

2. Querying a document on a page or widget

Passing Data: Make sure to define the parameter on a page that holds data of Type RecordReference (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 change it to your collection.
  • Set the Source value to a Record Reference (e.g. the name of your parameter that holds a record reference).
  • (Optional) By default, the result of this query will automatically refresh when the document is updated. (e.g. address/phone change) Checkmark the Single Time Query to load the result only once and not refresh when any updates are made.
  • Click Save.
Querying a document on a page

3. Showing data in UI elements

To show data in the Text widget:
  • Select the Image Widget from the widget tree or from the canvas area.
  • Move to property editor and scroll down to the path property.
  • Click on the Set from Variable text. (This will open a new panel)
    • Find the Source dropdown, click on unset and select the source. For showing data queried on Page, select the [collection] Record (from [pagename]).
    • Under the Available Options, click on Unset and select the field that holds the image URL path.
    • Click Save.
  • Select the Text Widget from the widget tree or from the canvas area.
  • Move to property editor and scroll down to the Text property.
  • Click on the Set from Variable text. (This will open a new panel)
    • Find the Source dropdown, click on unset and select the source. For showing data queried on Page, select the [collection] Record (from [pagename]).
    • Under the Available Options, click on Unset and select the field that you wish to show.
    • Click Save.
  • Similarly, show the data for other UI elements.
Showing data in UI elements

Retrieving List/Array fields

You may have added a Field that stores multiple values of the same data type. For example, a Field named accessory that has Field Type set to List and Data Type set to String stores the list of accessories names. Such a Field is called a List/Array Field in FlutterFlow.
Let's build an example that shows the sub-items added inside the Todo. Here's how it looks:
Retrieving List/Array fields demo
The List Field with values added looks like this in FlutterFlow and Firebase:
List/Array Field
Retrieving List/Array Field includes of following steps:
  1. 1.
    ​Creating a page with a scrollable view (Row/Column/ListView/GridView)

1. Creating a page with a scrollable view (Row/Column/ListView/GridView)

As an example, let's add a ListView with ListTile widget inside your page:
  • First, drag the ListView widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
  • Drag the Text widget and drop it inside the ListView and set its Theme Test Style to Subtitle 2.
Building a page with scrollable view

2. Generating dynamic children

Generating dynamic children help you prepare a list of items present in the List Field. The returned result is stored in a variable and you can later use it to populate the ListView. To generate dynamic children:
  • Select ListView from the widget tree or from the canvas area.
  • Click on the Generate Dynamic Children tab (on the right side of your screen).
  • Enter the appropriate Variable Name.
  • Set the Source value to your record (A single Firestore document).
  • Under the Available Options, click on Unset and select the array field.
  • Click Save.
Generating dynamic children

3. Showing data in UI elements

To show the items of List Field in the ListTile widget:
  • Select the ListTile Widget from the widget tree or from the canvas area.
  • Move to property editor and scroll down to the Text property.
  • Click on the Set from Variable text. (This will open a new panel)
    • Find the Source dropdown, click on unset and select the [variable name] [fieldname] (datatype) from the list.
    • Under the Available Options, click on Unset and select the field that you wish to show.
    • Click Save.
Showing data in UI elements

Retrieving Custom DataType fields

You might have added a Field that stores a custom data type. For example, address field that stores apartment, street, city, country, zip code, etc as subfields. Such a field has its Data Type set to Data Type and Data set to a custom data type name.
A sample custom data type field named address looks like this:
Address DataType field
Let's build an example that shows all the subfields such as apartment, street, city, country, and zip code of the custom datatype field named address into TextFields of a page. Here's how it looks:
Showing custom datatype subfields
Retrieving Custom DataType fields comprises the following steps:
  1. 1.
    ​Building a page​

1. Building a page

To build a page with address fields:
  • Create/select a page.
  • Select the Column and add a TextField to capture the address details and give it a name.
  • Similarly, add more TextField widgets as per subfields inside the custom data type field.
Building a page

2. Showing data in UI elements

To show the custom data type subfields into the TextField widget:
  • Select TextField from the widget tree or from the canvas area.
  • Move to the Property panel and scroll down to the TextField Properties section.
  • Find the Initial Value property and click on the Set from Variable text. (This will open a popup on the left side)
    • Here you can select a Document. To show the address of the logged-in user, select Authenticate User -> FieldName (e.g. address field with custom data type as Address).
    • Select Field that you want to display in this TextField.
    • Click Confirm.
    • Similarly, set other subfields data into TextField.
Showing data in UI elements