FlutterFlow Docs
Updating Data
This page describes how to update document data inside your Firestore collection.


Before getting started with this section, ensure you:

Updating Documents

Updating allows you to make changes to a single document. For example, you could display the Todo details on a new page and allow users to update any Todo information.
Showing and updating document data consists of the following steps:
  1. 1.
    Showing Data in UI Elements
  2. 2.
    Adding Action to Update Record

Design a Page

First, let's design a page that allows you to update the Todo details:
  • Create/Select a page.
  • Drag the Column widget from the Layout Elements tab.
  • Add a TextField (under Form Elements) inside the Column to show the Todo title.
  • Add another TextField inside a Column to show the Todo Description.
  • Add a Text Widget to show the Date.
  • Add a Button to save changes.

Showing Data in UI Elements

To allow users to update any data in the document, you must access the data. Most likely you will want to display it in the UI.
Passing Data: Make sure to define the parameter on a page that holds a data of Type Record. Also, pass the parameter from the previous page. You can follow the instructions for passing the data from one page to another here.
To show data in the TextField widget:
  • Select the TextField Widget from the widget tree or from the canvas area.
  • Move to property editor and scroll down to the Initial Value 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 from the Parameter, select the Parameter Name which holds the record.
    • Under the Available Options, click on Unset and select the field that you wish to show.
    • Click Save.

Adding an Action to Update Record

Here is an example of how to add an action that updates data in the Firestore document:
  • Select Button from the widget tree or from the canvas area.
  • Click on the Actions tab (on the right side of your screen).
  • Click on + Add Action and select the On Tap option.
  • Find the Action Type dropdown and change it to Backend Call.
  • Find another Backend Action Type dropdown below, and select Update Record.
  • Set the Source to the Parameter Name that holds the record.
  • Set the Available Options to reference.
  • Under the Set Fields section, click on the + Field button.
  • Click on the Field name.
  • Scroll down to find the Value Source dropdown and change it to From Variable.
  • Find the Source dropdown and change it to Widget State.
  • Find the Available Options dropdown and set it to the Name of the TextField.
  • Similarly, add the field for the other UI elements such as description and date.
Here's how it works when you run your app:
Last modified 1mo ago