FlutterFlow Docs
Deleting Data
This page describes how to delete a document from inside your Firestore collection.


Before getting started with this section, ensure you:

Deleting a Document

Here we'll see how to delete a single document. For example, you could display the Todo details on a new page and allow users to delete a Todo item.
Showing and deleting document data consists of following steps:
  1. 1.
    Showing Data in UI Elements
  2. 2.
    Adding Action to Delete Record

Designing A Page

First, let's design a page that allows you to see and delete 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 delete a document.

Showing Data in UI Elements

To allow users to see and delete the document, you must access the data and then display it 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 Delete Record

Here is an example of how to add an action that deletes a 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 Delete Record.
  • Set the Source to the Parameter Name that holds the record.
  • Set the Available Options to reference.
Here's how it works when you run your app:
Last modified 1mo ago