FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Search
⌃K
Links

Firestore

The Firestore action allows you to create, update or delete a record from a Firestore Collection.
Creating, updating, and deleting a Todo item

Prerequisites

Before getting started with this section:

Types of Database action

There are three types of actions you can perform on a Firestore document.
  1. 1.
    ​Create Document: Creates a new record inside the specified Firestore Collection.
  2. 2.
    ​Read Document: Fetches document data using a reference.
  3. 3.
    ​Update Document: Updates the specified field value of the existing document.
  4. 4.
    ​Delete Document: Deletes record inside the specified Firestore Collection.
  5. 5.
    ​Query Collection: Retrieves record(s) from the Firstore collection.

1. Create Document

Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget.
  1. 1.
    Select the Widget (e.g., Button) on which you want to define the action.
  2. 2.
    Select Actions from the Properties panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.
    1. 1.
      Click on + Add Action.
    2. 2.
      On the right side, search and select the Firestore action and then select Create Record.
    3. 3.
      Set the Collection to your collection name (e.g., todo).
    4. 4.
      Under the Set Fields section, click on the + Field button.
    5. 5.
      Click on the Field name.
      1. 1.
        Scroll down to find the Value Source dropdown and change it to From Variable.
      2. 2.
        Find the Source dropdown and change it to Widget State.
      3. 3.
        Find the Available Options dropdown and set it to the Name of the TextField.
    6. 6.
      Similarly, add the field for the other UI elements, such as description and date.
Defining Create Document Action
Now, when a user taps the Add button when running the app, it will create a document in a collection.
Adding record

2. Read Document

There are some scenarios where you may want to fetch document data in response to a widget action. For example, fetching the user's profile details like name, profile picture, and bio to display them on click of a button.
Here are some more use cases where you may find this action helpful:
  • Fetching additional user details for a post or comment.
  • Retrieve product details, price, and availability for order IDs in a user's cart.
  • Get details for cities referenced within a country document in a travel app.
Let's see how to add this action with an example that fetches and displays the details of users who've reviewed a travel destination. Here's how it looks:
Here's how to collections are setup:
collections
Follow the steps below to define this action to any widget:
  1. 1.
    Select the Widget (e.g., Button) on which you want to define the action.
  2. 2.
    Select Actions from the Properties panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.
  3. 3.
    Click on + Add Action.
  4. 4.
    On the right side, search and select the Firestore > Read Document action.
  5. 5.
    Now, Select Reference to Read data from.
  6. 6.
    Provide the Action Output Variable Name. This will be used to store the document data.
  1. 7.
    Now you can use the Action Output Variable Name provided in the previous step to fetch the details. For example, to display data on Text widget, select the Text widget > Properties Panel > Text > Set from Variable menu > [action_output_variable_name] > select the field you want to display.

3. Update Document

Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget.
  1. 1.
    Select the Widget (e.g., Button) on which you want to define the action.
  2. 2.
    Select Actions from the Properties panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.
    1. 1.
      Click on + Add Action.
    2. 2.
      On the right side, search and select the Firestore > Update Record action.
    3. 3.
      Set the Source to the Parameter Name that holds the record.
    4. 4.
      In order to update a specific document within a Firebase collection, you need to specify the reference to that document. The reference acts as a pointer to the exact document you want to update. So, set the Available Options to reference.
    5. 5.
      Under the Set Fields section, click on the + Add Field button.
    6. 6.
      Click on the Field name.
      1. 1.
        Scroll down to find the Value Source dropdown and change it to From Variable.
      2. 2.
        Find the Source dropdown and change it to Widget State.
      3. 3.
        Find the Available Options dropdown and set it to the Name of the TextField.
    7. 7.
      Similarly, add the field for the other UI elements such as description and date.
Defining Update Document action
The following visual demonstrates updating the record:
Updating record

4. Delete Document

Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget.
  1. 1.
    Select the Widget (e.g., Button) on which you want to define the action.
  2. 2.
    Select Actions from the Properties panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.
    1. 1.
      Click on + Add Action.
    2. 2.
      On the right side, search and select the Firestore > Delete Record action.
    3. 3.
      Set the Source to the [collection] Record (from ListView).
    4. 4.
      Set the Available Options to reference.
    5. 5.
      Click Close.
Defining Delete Document action
The following visual demonstrates deleting the record:
Deleting record

5. Query Collection

There are certain scenarios where you may want to query a collection manually. For example, you might want to only fetch data in response to a specific user action, such as clicking a button or submitting a form.
Additionally, If your app fetches different data under different conditions, you might find it more convenient to manually call queries. For example, fetching different tasks for admin and team members.
To manually query a collection, follow the steps below to define this action to any widget:
  1. 1.
    Select the Widget (e.g., Button) on which you want to define the action.
  2. 2.
    Select Actions from the Properties panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.
  3. 3.
    Click on + Add Action.
  4. 4.
    On the right side, search and select the Firestore > Query Collection action.
  5. 5.
    Choose the Collection you want to query.
  6. 6.
    Choose the Query Type among the List Of Documents, Single Document, or Count.
  7. 7.
    You can also Filter and Order the query result.
  8. 8.
    Provide the Action Output Variable Name. This will be used to store the query result.
Adding Firestore Query Action
  1. 9.
    Now you can use the Action Output Variable Name provided in the previous step to generate children from a variable on ListView.
  2. 10.
    Finally, you can display data in a Text widget. To do so, select the Text widget > Properties Panel > Text > Set from Variable menu > [children_from_variable_name] item > select the field you want to display.
Displaying data from action output variable
To gain more control, you can utilize conditional actions to trigger specific actions based on certain conditions. For instance, consider the example of a search bar triggering different Query Collection actions. If a user enters a value, you can apply a filter to the collection to fetch relevant results. On the other hand, if the search bar is empty, you can retrieve the full list of items.
Using Firestore Query Collection action with conditional action
The following visual demonstrates the search example using this action:
Search example
The search example used here is just for the simplification purposes. Its search functionality is quite basic and may not suffice for more complex requirements. Consider using Algolia as it provides robust full-text search functionality, which Firestore does not natively support.

Enabling Firestore Batch Write

When working with databases, you often need to create, update, or delete data. Typically, you would send individual requests to the database for each operation, which requires multiple round trips to the server. This can be time-consuming and inefficient.
By enabling Firestore batch write, you can group multiple operations and send them to the database as a single request. With this, either all the operations within the batch will succeed or none of them will be applied. This guarantees data consistency, so you don't end up with a partially updated state if something goes wrong during the process.
Suppose you have an e-commerce application, and after a successful order, you need to update the product inventory count and create a new document in the 'orders' collection. Using a batch write, you can combine these operations and execute them together to ensure data consistency.
To enable Firestore batch write, you must have multiple Firestore (any combination of) actions; inside the action editor, at the top right side, enable Batch Firestore Writes.
Enabling Firestore Batch Write

Trigger action on data change

Sometimes you might want to trigger an action whenever the data changes inside the collection. For instance, In a news app, you might want to notify users when new news is available, like this:
To do so:
  1. 1.
    Ensure you have Query Collection or Document from Reference added on a widget with Single Time Query disabled.
  2. 2.
    Now select the widget, head over to Actions, and click + Add Action.
  3. 3.
    Select the On Data Change tab. That means actions added under this will be called whenever the data changes.
  4. 4.
    Now you can add any action here.
  • Actions will be triggered whenever the data is added, updated, or deleted.
  • If you are adding this on ListView, ensure you disable the infinite scroll.
Here is an example showing the snackbar message when the data changes in a collection.
Trigger snackbar action on data change
Last Updated Date: August 11, 2023
Previous
Backend/Database
Next
API Call
Last modified 1mo ago