FlutterFlow Docs
Search…
Query Collection
Query Collection helps you to retrieve a record (or a list of records) automatically whenever a user navigates to the page containing the query. The information that is present in the record can be used to update any widget present inside.

Prerequisites

In order to use this backend query, you should have:
  • Completed all the steps of Firebase Setup for your project.
  • At least one Firestore Collection defined in your project.

Defining the Query

Go to your project page on FlutterFlow and follow the steps below to define a Query Collection backend query:
  1. 1.
    Select the widget (or page) on which to apply the query.
  2. 2.
    Select Backend Query from the Properties panel (the right menu).
  3. 3.
    Select the Query Type as Query Collection.
  4. 4.
    Choose the Firestore Collection to use for performing the query.
  5. 5.
    Under Query Type, select either List of Documents (returns a list of document references) or Single Document (returns only one document reference).
  6. 6.
    If you have selected the List of Documents in the previous step, you can set a Limit to the maximum number of documents returned.
  7. 7.
    If you want to apply any filter for retrieving the documents, click + Filter button. Select a Field Name that you want to use as the filter, choose a Relation (eg, Equal To, Greater Than), and then select the Value Source (either as a Specific Value or From Variable) with which the relation is to be checked.
  8. 8.
    You can also set the order in which the documents should be returned, click + Order By button. Select a Field Name to be used for ordering, and choose the Order to be either Increasing or Decreasing.
  9. 9.
    Click Save.
  10. 10.
    If the selected query returns a list of documents and if it's applied to any flexible widget (like Column, Row, or ListView) then FlutterFlow will generate the children widgets dynamically. A dialog will be displayed with a similar message, click Ok.
Generating dynamic widgets from ToDoList query (RobinDo app)

Using Query Data

The documents retrieved from the backend query can be used to set the record values to the widgets present inside. Follow the steps below to use the document record data:
  1. 1.
    Select the widget (eg, Text, Image, or ToggleIcon) on which you want to set the record data.
  2. 2.
    From the Properties Panel, select Set from Variable.
  3. 3.
    Choose the Source as the record variable (the variable gets automatically generated when you add the Collection query).
  4. 4.
    Under Available Options, select a field name from the dropdown.
  5. 5.
    You can also specify a Default Value (it is used if the record field is empty).
  6. 6.
    Click Save.
You can follow similar steps for using the record data on the other widgets as well.
Using record data (RobinDo app)

Code Overview

You can view the code that is generated by FlutterFlow in the background by going to the Developer Menu > View Code from the Tool Bar.
NOTE: This section is for users who might want to make some additional modifications to the generated code, or want to understand the code that is generated by FlutterFlow behind the scenes.
On adding the Collection Backend Query to retrieve a list of documents, a code similar to the following will be generated:
1
StreamBuilder<List<ToDoListRecord>>(
2
stream: queryToDoListRecord(
3
queryBuilder: (toDoListRecord) => toDoListRecord
4
.where('toDoState', isEqualTo: true)
5
.orderBy('toDoDate'),
6
),
7
builder: (context, snapshot) {
8
if (!snapshot.hasData) {
9
// widget to show while retrieving data
10
return Container();
11
}
12
List<ToDoListRecord> columnToDoListRecordList = snapshot.data;
13
if (columnToDoListRecordList.isEmpty) {
14
// widget to show when list is empty
15
return Container();
16
}
17
return SingleChildScrollView(
18
// returns a list of widgets
19
// with the document records
20
);
21
},
22
)
Copied!
  • ​StreamBuilder helps in rebuilding the widget present inside it with the latest data. That means, whenever any document gets updated on the Firestore Collection it would reflect here automatically without any user interaction.
  • stream is used to listen to any changes in the Collection specified. The queryBuilder is used for defining the query on the Collection, where is used to define a filter, and orderBy by default fetches the documents in the increasing order of the field specified.
  • builder is used to return a widget or a list of widgets, snapshot.hasData can be used to verify whether the retrieving process is complete.

References

  • You can learn more about querying Firestore Collection from here.
  • FlutterFlow app templates using Query Collection: RobinDo, GeekChat, and many more.