FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Ask or search…
⌃K
Links
Comment on page

Supabase

The Supabase action allows you to insert, update or delete a row from a Supabase table.

Prerequisites

Before you start, ensure you have completed the Supabase Setup and have a table created that you will use to add, update and delete the data.

Types of Supabase action

There are three types of actions you can perform on a Supabase table.
  1. 1.
    ​Insert Row: Adds a new row in a table.
  2. 2.
    ​Update Row: Updates a row with the specified values.
  3. 3.
    ​Delete Row: Deletes a row from a table.

1. Insert Row action

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 Supabase > Insert Row action.
    3. 3.
      Set the Table to your table name (e.g., assignments).
    4. 4.
      Under the Set Fields section, click on the + Add 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.
        Click on UNSET and select Widget State > Name of the TextField.
    6. 6.
      Similarly, add the field for the other UI elements.
Pro tip: While adding this action, you can leave the id (if marked as Primary) and created_at (if default value is now())fields. Supabase will automatically add values for these fields.
Adding insert row action

2. Update Row action

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 Supabase > Update Row action.
    3. 3.
      Set the Table to your table name (e.g., assignments).
    4. 4.
      Optional: If you want to get the rows after the update is finished, enable the Return Matching Rows option.
    5. 5.
      Now, you must set the row you want to update. Usually, this is done by finding a row in a table that matches the current row ID. To do so, click + Add Filter button inside the Matching Rows section.
      1. 1.
        Set the Field Name to the field that contains the IDs. Typically, this is the id column.
      2. 2.
        Set the Relation to Equal To because you want to find a row with the exact id.
      3. 3.
        Into the Value Source, you can select the From Variable and provide the id of the row for which you just updated values in the UI.
    6. 6.
      Under the Set Fields section, click on the + Add Field button.
    7. 7.
      Click on the field name.
      1. 1.
        Scroll down to find the Value Source dropdown and change it to From Variable.
      2. 2.
        Click on UNSET and select Widget State > Name of the TextField.
    8. 8.
      Similarly, add the field for the other UI elements.
Pro tip: If you have a flow like this, HomePage -> AssignmentDetailsPage -> UpdateAssignmentPage, you can enable the Replace Route option (see point no. 5 here) when you navigate from AssignmentDetailsPage to UpdateAssignmentPage. And then chain the Navigate Back action after the update action. This will directly open the HomePage after the row is updated.
Adding update row action

3. Delete Row action

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 Supabase -> Delete Row action.
    3. 3.
      Set the Table to your table name (e.g., assignments).
    4. 4.
      Optional: Later, if you want to know which rows were deleted from a table, enable the Return Matching Rows option.
    5. 5.
      Now, you must set the row you want to delete. Usually, this is done by finding a row in a table that matches the current row ID. To do so, click + Add Filter button inside the Matching Rows section.
      1. 1.
        Set the Field Name to the field that contains the IDs. Typically, this is the id column.
      2. 2.
        Set the Relation to Equal To because you want to find a row with the exact id.
      3. 3.
        Into the Value Source, you can select the From Variable and provide the id of the row you want to delete.
Pro tip: You can chain the Refresh Database Request action after this action to remove the deleted items from the list.
Adding delete row action
Previous
Simple Search Action
Next
Algolia Search
Last modified 4mo ago