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


Before getting started with this section:

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. Just like the following visual:
Updating Todo item
Showing and updating document data consists of the following steps:
  1. 1.
    ​Build a page (you can skip this if you already have a page designed)

1. Build a Page

First, let's design a page that allows you to update the Todo details:
  • Create/Select a page and give it a name.
  • Select the AppBar widget and remove the existing back button. Move to the property editor (on the right) and turn on the Show Default Button.
  • Inside the Column widget, add a TextField (under Form Elements) to show the Todo title and give it a name such as TextFieldTitle.
  • Add another TextField inside a Column to show the Todo Description and give it a name such as TextFieldDescription.
  • Add a Container with an action to open the DatePicker.
  • Add a Text inside Container to show the selected Date.
  • Add a Button to save changes.
Building a page

2. Showing data in UI elements

Before you allow users to update any data, you must display it on the screen.
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.
  • Similarly, show the data for UI elements as well.
Show data in UI elements

3. Adding action to update record

Pro tip: After adding the Update Record action, you can open the main Todo listing to show the updated item. You can do so by chaining/adding the Navigate To action by clicking on the + button inside the already added action box.
When you run the app, it should like the visual shown at the start of the section.