FlutterFlow Docs
Search…
Advanced Functionality πŸ€–
Backend Calls
The Backend Call Action allows you to create, update or delete a record from a Firestore Collection. You can also trigger API calls using this action.

Types of Backend Action

There are four types of Backend Action currently available on FlutterFlow, they are as follows:
  • Create Record: Creates a new field inside the specified Firestore Collection and sets a value to the field.
  • Update Record: Updates the value of the specified field present inside the Firestore Collection.
  • Delete Record: Deletes the reference to a record from the Firestore Collection.
  • API Call: Triggers an API call, you can also pass variables to it.

Prerequisites

In order to use a backend call to Create, Update, or Delete a field from a Collection, you should have:
  • Completed all the steps of Firebase Setup for your project.
  • At least one Firestore Collection defined in your project.
For using a backend call to trigger API Calls, you should have at least one API Call defined inside your project. To know how to define an API Call, follow the instructions on this page.

Defining Backend Call Action

Go to your project page on FlutterFlow and follow the steps below to define a Backend Call Action to any widget.
  1. 1.
    Select the widget on which to apply this Action.
  2. 2.
    Select Actions from the Properties panel (the right menu).
  3. 3.
    Click + Add Action button.
  4. 4.
    Choose a gesture from the dropdown among On Tap, On Double Tap, or On Long Press.
  5. 5.
    Select the Action Type as Backend Call.
  6. 6.
    Now, select the Backend Action Type from the dropdown menu among the four options present inside it.
NOTE: For using a backend call to Create, Update, or Delete a field from a Collection, you should have a completed Firebase set up on FlutterFlow. In order to perform any of these actions, you should also have at least one Firestore Collection added to FlutterFlow.

Create Record

If you have selected the Create Record option:
  1. 1.
    Select the Collection inside which you want the create the field.
  2. 2.
    Click on the + Field button.
  3. 3.
    Choose the field name from the dropdown under Field.
  4. 4.
    Value Source can be From Variable, or depending upon the field type you will have other options to choose from.
  5. 5.
    (Optional) If you have chosen From Variable in the previous step, you have to select the Source and the variable that you want to use under Available Options. Here, you can also specify a Default Value, it will be used when the field is empty or null.
  6. 6.
    (Optional) You can add more fields that you want to set values to by repeating Step 2 - 5.
Defining the Create Record Action
Demo of using the Create Record Action:
Creating a new task with provided details (RobinDo app template)

Update Record

If you have selected the Update Record option, choose the reference of the record you want to update. Follow the steps below:
  1. 1.
    Select the Source of the reference.
  2. 2.
    Specify the reference you want to update under Available Options.
  3. 3.
    Finally, you have to add the fields that you want to update. Click on the + Field button.
  4. 4.
    Choose the field name from the dropdown under Field.
  5. 5.
    Value Source can be From Variable, or depending upon the field type you will have other options to choose from.
  6. 6.
    (Optional) If you have chosen From Variable in the previous step, you have to select the Source and the variable that you want to use under Available Options. Specify a Default Value if you want an empty or null value to be replaced with it.
  7. 7.
    (Optional) You can add more fields that you want to update by repeating Step 3 - 6.
Defining the Update Record Action
Demo of using the Update Record Action:
Updating the completion state of a task (RobinDo app template)

Delete Record

If you have selected the Delete Record option, choose the reference of the record you want to delete. Follow the steps below:
  1. 1.
    Select the Source of the reference.
  2. 2.
    (Optional) If the selected Source is itself the reference then you can skip this step, otherwise select the reference from the Available Options dropdown menu.
Defining the Delete Record Action
Demo of using the Delete Record Action:
Deleting a task (RobinDo app template)

API Call

If you have selected the API Call option, you need to select the name of the API call that you want to trigger along with any parameters you might want to pass to it. Follow the steps below:
  1. 1.
    Select a Call Name from the dropdown menu.
  2. 2.
    If your API call needs any parameter, click + Parameter to define what value to pass to a parameter.
  3. 3.
    Enter an Output Variable Name which would be useful if your API call returns any result. You can use the returned value elsewhere in the app.
Defining a GET API Call Action (NASA Open API)
Demo of an API Call in action:
riggering GET API Call in app (NASA Open API)

Code Overview

You can view the code that is generated by FlutterFlow in the background by going to the Developer Menu > View Code from the Tool Bar.
NOTE: This section is for users who might want to make some additional modifications to the generated code, or want to understand the code that is generated by FlutterFlow behind the scenes.
Adding the Create Record Backend Call will generate a code that will look similar to this:
Code for Create Record Backend Call (Click on the image to see the code clearly )
The above code is for storing a task data to a Firebase Collection. First of all an object is created with the data to store onto the Firestore Collection:
1
final toDoListCreateData = createToDoListRecordData(
2
toDoName: textController1.text,
3
toDoDescription: textController2.text,
4
toDoDate: datePicked,
5
);
Copied!
Then set() method is used on the Firestore Collection to store the data:
1
await ToDoListRecord.collection.doc().set(toDoListCreateData);
Copied!
Adding the Update Record Backend Call will generate a code that will look similar to this:
First, a new object is created with the data to update:
1
final toDoListUpdateData = createToDoListRecordData(
2
toDoState: true,
3
);
Copied!
Then update() method is called on the toDoNote reference, by passing the data, to update the record present on the Firestore Collection.
1
await widget.toDoNote.update(toDoListUpdateData);
Copied!
Adding the Delete Record Backend Call will generate a code that will look similar to this:
In the above code, delete() method is used on the toDoNote object to remove the currently selected task:
1
await widget.toDoNote.delete();
Copied!

References

FlutterFlow uses the cloud_firestore package to interact with the Firestore Database, to know more about how the CRUD operations are performed using this package check out their Docs.
If you want to navigate to a different page of the app once a backend call action completes, use the Navigate action. Check out this page to know how to add multiple actions.