How To Integrate A FlutterFlow App With A Backendless Backend

Let’s start with User Registration.

User registration opens up the entire set of user management functions in Backendless. These include session management, password management, user roles, and relating users to other data objects.

User registration also opens up user engagement opportunities such as email messaging, push notifications, and in-app messaging.

Firstly, let’s create a new page named Registration. Change the AppBar title text to User Registration so it describes the page logic.

Under the AppBar, add the Column component with two Text Fields (EmailField and PasswordField) and a Button (RegisterButton).

The Widget Tree will look like this:

Toggle the Password Field setting for the PasswordField component:

Also, add the disable options for the RegisterButton so it is inactive when the EmailField or the PasswordField are not filled:

At this point, I’ll skip the description of setting up the components style, alignment, and paddings (you can change these at your own discretion). Finally, the page layout might look like this:

So the UI is ready. Now let’s go to the registration part.

Let’s create a new POST API and name it RegisterUserAPI. Configure it with corresponding URL and headers.

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/users/register (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/users/register for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Also let’s create two variables – email and password of type String – that would be passed to the body of the Backendless User Registration API:

And then pass these variables to the request body:

Now you’re able to test the RegisterUserAPI from the Response & Test tab:

As you can see, the API works correctly and the registered user object is returned with status 200 as expected.

Now we can move forward to the RegisterButton actions. Create a new On Tap action and configure an Action Chain that looks like:

1. Сall the RegisterUserAPI and pass the email and password values:

The result of the request will be set to the registerUserResult variable.

The email and password values are taken from the corresponding EmailField and PasswordField components:

2. After the RegisterUserAPI is called, we receive its response. It could be successful (3) or failed (4).

3. If the response is successful, an alert with a “User has been registered in Backendless. You can now login.” message is shown:

4. Otherwise, the failure alert is shown with the error text received in the registerUserResult:

We will only display the message from the error, not the whole object. This can be done by using the Custom JSON Path name:

5. Finally, we can clear the EmailField and PasswordField components:

The RegisterButton On Tap action is configured and we can now test how the User Registration works.

Return to the UI Builder page and press the “Run your app in Test Mode” button. Please note that the API won’t work in the Preview mode.

Wait until the test session is loaded, enter an email and password of a new user and click Register:

If the registration was successful, we will receive a message about success:

If an error occurred during registration (for example, an attempt was made to register an existing user), we will receive the following notification:

With that, user registration is complete. Now let’s move to logging in the user.

For this section, we’ll skip some of the details that were previously described in the Register User section.

Create a new page named Login and change the AppBar title text to Login so it reflects the page logic.

Also, for this page we need two Input Field components (LoginField and PasswordField) and a LoginButton:

As we did with the Registration page, toggle the Password Field setting for the PasswordField component and add the disabled options for the LoginButton so it is inactive when LoginField or the PasswordField are not filled. These steps were also described in the previous section (Registration page).

Finally, the page layout might look like this:

So the UI is ready. Now let’s go to the login part.

Let’s create a new POST API and name it LoginAPI. Configure it with corresponding URL and headers:

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/users/login (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/users/login for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Also create two variables – login and password of type String that would be passed to the body of the Backendless Login API:

Pass these variables to the request body:

Now we’re able to test the LoginAPI from the Response & Test tab:

The API works correctly and the logged in user object is returned with status 200 as expected.

Now we can move forward to the LoginButton actions. Create a new On Tap action and configure an Action Chain that looks like this:

1. Call the LoginAPI and pass the login and password values taken from the corresponding LoginField and PasswordField.

The result of the request will be set to the loginResult variable:

2. After the LoginAPI is called we receive its response. It could be successful (3) or failed (4).

3. If the response is successful, an alert with a “User has been logged in to Backendless” message is shown:

4. Otherwise, the failure alert is shown with the error text received in the loginResult:

5. Finally, we can clear the LoginField and PasswordField components:

Now the LoginButton On Tap action is configured and we can test the login.

Return to the UI Builder page and press the “Run your app in Test Mode” button. Please note that the API won’t work in the Preview mode.

Wait until the test session is loaded, enter the login and password values of the user and click Login:

If the login was successful, we will receive a message about success:

If an error occurred (for example, an attempt was made with incorrect password), we will receive the following notification:

In this section, let’s walk through how to retrieve data from your database by running a query.

Backendless Database uses a SQL-based querying system. This approach allows you to easily query your data and display exactly what you want the user to see.

We will again create a simple page named DataOperations for demonstration.

Change the AppBar title text to Data Operations so it describes the page logic.

This time, firstly, let’s define a new GET API call to retrieve data from the Backendless Person table:

Name this API PersonFind and сonfigure it with corresponding URL:  https://api.backendless.com/APP_ID/REST_API_KEY/data/Person (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/data/Person for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Create a variable – whereClause of type String. Set the default value for this variable: objectId IS NOT NULL. This means that if we want to get all records from the table without any conditions, we’ll pass the objectId IS NOT NULL condition to the query parameters. Otherwise, the specified conditions will be passed:

Pass the whereClause variable to the query Parameter named where:

The API call for the Backendless Data Retrieval is ready to be tested:

If the Person table exists in Backendless and has any records, they will be returned in the response. Otherwise, you’ll receive an error message saying that the corresponding table doesn’t exist. Notice that the whereClause value is set to objectId IS NOT NULL.

Please create the Person table in Backendless with the name (String) and age (Int) columns if it doesn’t exist.

As for our API, it is ready and we can move forward to the UI.

For the DataOperations page, create a new Page Variable personRecords of type List<JSON>. This can be done from the State Management tab of the page component:

Add the Column component with the ConditionField (TextField), FindButton and a PersonList (ListView):

Now let’s configure the PersonList component. This component will present the Person objects retrieved from Backendless.

In the Generate Dynamic Children tab of the PersonList, set the personList variable with maximum amount of records = 100 (Backendless server sets the maximum allowed value for the page size to 100 objects) and value from the personRecords variable, defined previously (we’ll populate this variable with records a little bit later):

Configure the conditional visibility for the PersonList, so it doesn’t appear when there are no records:

Return to the UI Builder and add a Column with 3 Text components (NameText, AgeText and ObjectIdText) and a Divider in the PersonList:

Configure the NameText, AgeText, and ObjectIdText components, so they represent the values from the PersonList items:

Finally, our UI layout will look like this:

As you can see, there are several rows in the PersonList. Each row will correspond to the record from the personRecords variable.

The text from the ConditionField component will be used as the condition for querying data from Backendless when the FindButton is pressed. So let’s finally add the logic to the FindButton On Tap action:

1. Call the PersonFind API and pass the whereClause value from the ConditionField. The result of the request will be set to the findResult variable:

2. After the PersonFind API is called we receive its response. It could be successful (3) or failed (4).

3. If the response is successful, we set the response array to the personRecords variable:

4. If the server returned an error trying to retrieve objects (e.g. the Person table doesn’t exist), the failure alert is shown with the error text received in the findResult:

Now the FindButton On Tap action is configured and we can move to the tests.

Return to the UI Builder page and press the “Run your app in Test Mode” button. Please note that the API won’t work in the Preview mode.

Wait until the test session is loaded, enter (optionally) the condition value and click Find:

If the API call was successful, we will see a list of records, retrieved from Backendless:

If an error occurred (e.g. using invalid condition), we will receive the following notification:

As the data retrieval is ready, we can now move on to object creation.

In this section, we’ll take a look at how to save data into our Backendless Database from FlutterFlow.

Create a new page named PersonPage. This page will contain logic to create (and later, edit) a Person object.

Return to the DataOperations page and add a new IconButton named CreatePersonButton:

This button will navigate us to the PersonPage without any parameters – just for creating a new Person.

Also, we’ll clear a personRecords variable here, so the On Tap action has this behavior:

Let’s go back to the PersonPage and create a Page variable – titleText of type String:

Change the AppBar style to the one that contains the back button (so you can return to the previous page) and set the AppBar title to the titleText variable.

For the page, add an On Page Load action and set the titleText variable value to “Create a new Person” (this title can be different in the future, but we’ll return to it in the following sections):

Also, for this page we need two Input Field components (NameField and AgeField) and a SaveButton:

Modify the disabled state option for the Save button (it should be disabled when the NameField or AgeField is not filled):

Now it’s time to add a new POST API to create a new Person. Configure it as shown below:

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/data/Person (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/data/Person for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Also create two variables – name of type String and age of type Int – that will be passed to the body of the Backendless Saving Single Object API:

Pass these variables to the request body:

Now the PersonSave API is ready to be tested. Go to the Response & Test tab, enter the test name and age values and run the API:

The API works correctly and the created Person object is returned with status 200 as expected.

Now we can move forward to the SaveButton actions. Create a new On Tap action and configure an Action Chain that looks like this:

1. Call the PersonSave API and pass the name and age values from the NameField and AgeField. The result of the request will be set to the saveResult variable:

2. After the SaveAPI is called we receive its response. It could be successful (3) or failed (5).

3. If the response is successful, we’ll see an alert with a success message “Object was successfully saved in Backendless. You will be redirected to the Data Operations page.”:

4. After the alert is closed, we are automatically redirected back to the Data Operations page.

5. If any error occurred while saving a new Person object, an error alert will appear with the error text received in the saveResult. As usual, we will display only the message from the error (as we did in the previous section), not the whole object. This can be done by using the Custom JSON Path name:

6. Finally, we clear the NameField and AgeField components:

Now the SaveButton On Tap action is configured and we can move to the tests.

Return to the UI Builder, select the DataOperations page, and press the “Run your app in Test Mode” button. Please note that the API won’t work in the Preview mode.

Wait until the test session is loaded, enter the condition, review the records matching the criteria, and click the Add New Person button to open the PersonPage:

Fill the Name and Age in the corresponding fields and click Save:

If everything is ok, the success message will appear:

You can now press the Back button to return to the previous DataOperations page. Enter the condition again and you’ll see a newly created record:

Now when we’ve finished with creating a new object in Backendless, we can move forward to editing the existing objects.

Take a look at the next section to learn how to update or delete an object.

Now that we’ve learned out how to create a new object in Backendless, it will be easier to understand process of object editing. We can use the existing PersonPage for this.

Firstly, let’s add the personObject to the PersonPage parameters:

This parameter will be passed from the Data Operations page and will be used to identify an object we want to update or delete.

Return to the DataOperations page, select the PersonList Column and add the On Tap action:

1. Navigate to the PersonPage. Here we’ll pass the selected PersonList Item as the personObject:

2. Clear the personRecords list:

We’re finished with the DataOperations page and now can work directly with the PersonPage.

On the PersonPage, change the On Page Load action to follow the condition:

1. Check if the personObject is set.

2. If the personObject is set on page, set the titleText value to “Edit Person”:

3. Otherwise, set the titleText value to “Create a new Person”:

For the NameField and AgeField set the Initial Values if the personObject is set:

Also add the Icon Button (DeleteButton) on the PersonPage, so finally the page may look like this:

Now let’s add a new PersonUpdate PUT API call. Configure it as shown below:

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/data/Person/[objectId] (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/data/Person/[objectId] for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Create an objectId variable of type String that will be passed as a dynamic parameter to the Backendless Update Single Object API url. Also, create two variables – name of type String and age of type Int – that will be passed to the body of the request. These are the parameters we would have an ability to change in the Person object:

Pass the name and age variables to the request body:

Now the PersonUpdate API is ready to be tested. Go to the Response & Test tab, enter test name, age, and objectId values (choose any Person object in your database to test with) and run the API:

The API works correctly and the updated Person object is returned with status 200 as expected. Notice that objectId value is the id of the existing object in Backendless Database.

Now we can move forward to the SaveButton actions. Edit the existing On Tap action to look like this:

1. Check if the personObject is set.

2. If the personObject is set, call the PersonUpdate API:

Pass the name and age values from the NameField and AgeField (like we did when creating a Person in the previous section). Also, pass the objectId value taken from the personObject:

3. After the PersonUpdate API is called, we receive its response. It could be successful (4) or failed (5).

4. If the response is successful, we’ll see an alert with a success message “Object was successfully updated in Backendless.”:

5. If any error occurred while updating a Person object, an error alert will appear with the error text received in the updateResult. As usual, we will display only the message from the error (as we did in all previous sections):

6. If the personObject is not set, a new object will be created. The steps 6-10 are the same as the saving steps 1-5 from the previous section – we call the PersonSave API to create a new Person and return to the DataOperations page if the creation was successful.

We’ve finished the object update functionality and now it’s time to implement the object deletion.

Add a new DELETE API call called PersonDelete and configure it:

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/data/Person/[objectId] (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/data/Perso/[objectId] for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

To pass the objectId parameter to the URL, add it in the Variables tab:

Go to the Response & Test tab, enter the objectId of the existing Backendless object, and run the API:

The API works correctly and returns the deletion timestamp with status 200 as expected.

Add the On Tap action for the DeleteButton:

1. Firstly a Confirmation Dialog is shown. User is asked if he/she is really want to delete an object:

2. If the user confirms the object deletion, the PersonDelete API (3) is called.

3. Otherwise, the dialog just closes without any further actions.

4. After the PersonDelete API is called, we receive its response. It could be successful (5) or failed (6).

5. If the response is successful, we’ll see an alert with a success message “Object was deleted from Backendless. You will be redirected to the Data Operations page.”.

6. After the alert is closed, we are automatically redirected back to the Data Operations page.

7. Otherwise, an error alert will appear with the error text received in the saveResult.

Now the SaveButton and DeleteButton On Tap actions are configured and we can move to the tests.

Return to the UI Builder, select the DataOperations page, and press the “Run your app in Test Mode” button. Please note that the API won’t work in the Preview mode.

Retrieve the records from Backendless and click on any item:

You will be redirected to the PersonPage. Edit the Person age

and click Save. If everything is fine, you’ll see a corresponding message:

Now click the Delete Button:

and confirm the object deletion.

You’ll receive a message after the object is deleted:

And will be redirected to the Data Operations page.

In the final part of this article, let’s look at sending emails with templates.

Firstly, open Backendless Console and configure the Email Settings to enable the Email Delivery API. Then create a simple Email Template to test the functionality.

Now we can switch back to FlutterFlow.

Create a new Page named EmailTemplate, change the AppBar title and add a column with two TextField components (TemplateNameField and EmailsField) and a Button (SendButton):

So the page layout should look like:

The email addresses can be filled in the corresponding field separated by comma.

Let’s add a new API to send emails and name it SendEmailWithTemplate:

The URL value is https://api.backendless.com/APP_ID/REST_API_KEY/emailtemplate/send (or https://eu-api.backendless.com/APP_ID/REST_API_KEY/emailtemplate/send for the EU cluster). Be sure to replace APP_ID and REST_API_KEY with your app’s values, found on your Backendless Backend Dashboard.

Also let’s create two variables – templateName of type String and addresses of type List<String> that will be passed to the body of the Send Emails with Templates API:

Pass these variables to the request body:

As you might have noticed, the addresses parameter is a List of Strings and the value from the EmailsField is a type of String, so we need the ability to parse the string value to the list.

Let’s create a simple custom code split() function for this:

The split() function takes a String variable named input as a parameter and returns a list, created from this input parameter separated by commas.

Now we can configure the On Tap action for the SendButton.

Add the Button disabled options:

So the button is disabled if any of the input fields are empty.

Now add the On Tap action with the actions chain:

1. Сall the SendEmailWithTemplate API and pass the templateName and addresses values:

The result of the request will be set to the emailResult variable.

As you can see, the addresses parameter value is the value from the EmailsField, split to the array using the split function:

2. After the SendEmailWithTemplate API is called, we receive its response. It could be successful (3) or failed (5).

3. If the response is successful, an alert with an “Email was sent successfully. Please check your email box.” message is shown:

4. After the successful alert is closed both text fields are cleared:

5. Otherwise, the failure alert is shown with the error text received in the emailResult:

The SendButton On Tap action is configured and we can now test how Sending Email with Template works.

Return to the UI Builder page and press the “Run your app in Test Mode” button. Wait until the test session is loaded, enter a template name an email (or emails separated by commas) and click Send:

If the email was sent successfully, we will receive a message about success:

And the email appears in your email inbox:

Otherwise, if the error occurred (e.g. user entered incorrect template name), the error message will appear: