How to integrate FlutterFlow with Baserow

The performance of a database is parallel to the performance of an application. To design for scale and store large amounts of data, it is necessary to choose a performant and scalable data backend for your mobile app. A solid backend database helps process data and provide relevant information to make an app more efficient. Baserow database provides an easy way to integrate data with any external system.

Baserow is API first which means it is made to connect with other software. The Baserow API can be used to send or retrieve information for other apps.

What we’ll build

FlutterFlow is a low-code builder for developing native mobile applications. We show you how to use the Baserow API with FlutterFlow. We will fetch these data using an API call. An API call is a way to communicate database updates with FlutterFlow.

In this tutorial, we will cover:

• How to set up your Baserow database in the back end
• How to get data into the Baserow database
• Passing data along to your Flutterflow app
• How to display the data on the frontend Flutterflow app

Set up a Baserow database

Baserow’s open-source nature makes it infinitely extensible and flexible. It can handle large amounts of records and data with no limits on the number of databases, rows, or storage using the self-hosted version.

Create a new workspace

The first step is to create a workspace. To start with, we will set up a new workspace and add a database within the workspace. To add a new workspace:

• From the Baserow Dashboard page select ‘+ Create workspace’
• Enter a workspace name
• Click ‘Add workspace’

If you are just getting started with Baserow, we recommend you read our user documentation on how to create a Workspace and how to add collaborators to your workspace.

Let’s get into populating data in your Baserow database.

Start with a Baserow template

A quick way to get your project up and running is to create a database from a template. We’ve considered several scenarios to utilize databases across any use case and have created 50+ templates for you to choose from to help you get started with your database.

For this tutorial, we’ll use the hotel bookings template. Use this template to gain insight into existing reservations for your hotel rooms, customers, room demand, and hotel booking profits. This template structures and organizes all data related to hotel reservations, providing you with all the necessary information to either make further decisions or enhance the experience for future reservations.

To start with your template, log in to your Baserow account and choose a workspace into which the template will be installed. Click on ‘Add database’ and select ‘From template’.

To learn more about creating a database from a template or creating a blank new template from scratch, read our documentation on how to add a template.

In this tutorial, we will be working with the default tables in the Hotel Bookings template: Rooms, Reservations, Customers, Platforms. However, with Baserow you can modify the default database and populate the tables with your data.

Get API token

Baserow uses a simple token-based authentication. You can use API tokens to authenticate with the REST API endpoints where you can create, read, update, and delete rows. With Baserow API, you can integrate your data with thousands of services.

The REST endpoint connects two or more services and enables data exchange between the server, database, and app.

Create an API token

You need to generate at least one API token in your settings to use the endpoints.

To access your account page, click on the dropdown icon beside your account name in the top-right of the home screen, then click ‘Settings’ from the dropdown menu.

To create an API token,

1. Within your ‘Settings’ page, click on the ‘API Tokens’ tab
2. Click on the ‘Create token +’ button
3. Input the name and select an existing workspace
4. Click on the ‘Create token’ button to create a new API token for the selected workspace and the authorized user.

From the Database token page, select the ellipsis ••• beside the workspace and copy the token:

It is possible to set permissions on the table level. The Database table rows endpoints can be used for these operations. If all tables in the workspace are checked, then the token creates permissions for all the tables in the database selected. The same applies if a database reference is provided.

To learn more about API permissions, read our documentation on how to set permissions on the table level.

Get the Baserow API endpoint

Within the API Tokens page, you can view the API documentation. Alternatively, click on the vertical ellipsis ⋮ beside the selected workspace and select ‘View API Docs’ from the workspace menu:

Note that: The database API documentation is generated automatically based on the tables and fields that are in your database. If you make changes to your database, table, or fields, it could change the API interface. Therefore, make sure that you update your API implementation accordingly.

To list rows in the Rooms table a GET request has to be made to the Rooms endpoint. In this tutorial, we want to display rows in the Rooms table:

Base URL: https://api.baserow.io. The URL for the Rooms endpoint is https://api.baserow.io/api/database/rows/table/94451/?user_field_names=true.

Add Query parameters

You can use variables in URLs and Headers by modifying the results with query parameters. Query parameters control what data is returned in endpoint responses.

Query parameters are a defined set of parameters attached to the end of a URL. To append query params to the end of a URL, a '? ’ Is added followed immediately by a query parameter. For example: ?user_field_names=true&page=1&size=100

The JSON response is paginated and the first page is returned by default. The correct page can be fetched by providing the page and size query parameters to list rows in the Rooms table.

We want to combine all the query params like: https://api.baserow.io/api/database/rows/table/95300/?user_field_names=true&page=1&size=100

Next, let’s get into how to display the data on the front end and pass nested data structures along.

Set up a FlutterFlow API call

First, we need to create a new project. You can create a new project from scratch or by using a sample app. From the FlutterFlow Dashboard page select + Create Project tile and set up the project.

To get external data into your Flutterflow app, go to the project on FlutterFlow in which you want to add the API Call. Navigate to the ‘API Calls’ tab on the lefthand menu of your Flutterflow project.

Next, click the ‘Add API call’ button to define a new API call.

1. Enter an API call name so that you can easily reference the API call when you need it.
2. Select the appropriate method type from GET or POST and enter the API URL retrieved from your Baserow API documentation. To list rows in the Rooms table a GET request will be made to the Rooms endpoint.
3. Authenticate the Baserow API by providing your API token in the HTTP authorization bearer token header. The value of the header is Token followed by your Baserow API key. Add a header in the format Authorization: Token YOUR_API_KEY.

The HTTP Authorization request header contains the credentials to authenticate a user agent with a server. APIs use authorization to authenticate the sender of a request and verify that they have permission to access or manipulate the relevant data.

It is possible to add query parameters via the interface in Flutterflow. Note that you can either need to specify the query params in the URL after the ? or via the interface, but not both. For this tutorial, we will add the query params manually to the API URL: https://api.baserow.io/api/database/rows/table/95300/?user_field_names=true&page=1&size=100

By setting the default values for these query parameters, when a call is made, the values will be automatically set. This can save time from manually setting constant values with each call.

Test API call

Navigate to the ‘Response & Test’ tab within the API call window and click on ‘Test API Call’.

Finally, click on ‘Save call’.

Define JSON path

When we call our Baserow API, we don’t want to display all of the results. We want to get specific parts out of the JSON object. The way to get values out of a JSON response in Flutterflow is by using JSON paths.

JSONPath is a query language for JSON, similar to XPath for XML. Use JSON path to easily access a specific field in a (potentially nested) API call response. For more info, try the JSONPath Online Evaluator: https://jsonpath.com/

We want to filter some subset of it by using JSON Path to specify the JSON fields that are needed. Now, let’s test our JSON paths on Flutterflow to filter the JSON in real-time.

Specify JSON Path

Every query starts with the root element of our JSON object $. Thus, we start by specifying the root element $.

JsonPath expressions can use the dot–notation $.store.book[0].title or the bracket–notation $['store']['book'][0]['title'] to pull the properties we need. This will preview the value we need from the key set.

Filter Operators

To filter through the results, use the path $.results[?(@.*key* == '*value*')]. @ represents the current item being processed. By referencing the item with the @ symbol we can refer to any key and check a condition from an array of objects.

If we want to filter only rooms that accommodate less than 4 occupants, use the path $.results[?(@.Accommodates < '4')].

Now let’s get into adding the JSON paths.

Test JSON path

We want to do a recursive search to get results from the nested data structures with a deep scan operator: $..*key*. This path will query our entire JSON object by the key and return an array of objects [ ].

In this tutorial, we want to pull a list of room numbers in the JSON object, we’ll input the path $..Number. The result traverses down through our nested data structure.

Now that we’re done testing the paths, you can add the paths by clicking on the ‘Add JSON Path’ button at the top of the screen. Define the name and JSON path.

Then click on the ‘Save Call’ button.

Now, let’s go back to our Flutterflow app to display this data.

Build your Flutterflow app

After the project is created, you will have the default homepage created with a basic appbar added to the page. You need a page to display the hotels. You may either add a new page or use the default one (Home Page).

Create the app UI

Now, we’ll create a simple app UI on FlutterFlow to display a list of hotel rooms. To do this, we need to add a column to a list to display multiple children. Let’s get into it.

In FlutterFlow, the layout is built using UI Elements called Widgets. All widgets that may be added to the programme are accessible via the UI Builder. After selecting a page, you can add various widgets using drag-and-drop from the Layout Elements tab in the Widget Panel within UI Builder or from the widget tree.

First, add a ListView widget to the page. The ListView widget is used to show a large number of items as a scrollable list. Drag the ListView widget into the page.

The Column widget is used to display widgets vertically, whereas the Row widget is used to display widgets horizontally. Drag the column widget into the ListView to add it to your project.

Next, drag some text and image widgets from the Base Elements tab and drop them into the column.

Create a Backend Query

Now, let’s make a query to our backend database by connecting to Baserow. To display a list of all rooms, we’ll use ListView, a scrolling widget. ListView automatically provides scrolling when the list of items won’t fit on the screen. It displays its children in the scroll direction, one after the other.

Click on the Column embedded within the ListView and select the API call Query type and the Call Name defined in the previous step:

Click ‘Confirm’.

Map JSON Path

Next, we want to display the JSON results in a list of items on our app so users can scroll through the results. You will decide how each item will be displayed. To do this, we need to generate dynamic children for each of our hotel listings. Generating Dynamic children helps bind the list to the scrollable widgets such as ListView, Column, Row, and Wrap. The ListView contains the elements through a backend call.

To generate dynamic children, select ListView from the widget tree or from the canvas area. Next, click on the ‘Generate Dynamic Children’ tab in the top right corner of your screen.

Enter the appropriate Variable Name and set references for:

1. Source: Baserow Link rows response
2. API Response options: JSON Body
3. Available options: JSON Path

Click on ‘Confirm’, set a ‘Variable name’ and then click on confirm again:

The results will be created dynamically from the list in your database.

Display data on the page

Now that we have generated the dynamic children, the ListView is populated with the number of hotel rooms present in the database.

Next, we need to display data on the text and image widgets. First, select the image widget and from the Property Editor in the right corner of your screen, set the path as ‘Set from variable’. This will allow you to set dynamic data.

As we want to bind this list to our Baserow table rows, select ‘List row response’ as the Source:

Similarly, if you have other datatypes as the Source, select the [dynamic_children_variable_name] item (datatype) from the list. Finally, you can set any default value if you wish to.

Click ’Save’. Now that you have completed building the app, you can either run your app in Run or Test mode.

You can run your app in Test mode to immediately preview the dynamically generated children from the Baserow API call. To run your app in Test mode, click on the Dropdown menu inside the Run Button and then click on ’Test’.

You can test the fully-functional version of your app in Run mode. To run your app in Run mode, simply click on the ‘Run’ button at the top right corner of the screen. The Run mode typically requires around 2-4 minutes or more depending on the size of your project.

What’s next?

This model workflow can help you do anything in your app. The backend database acts as a foundation for the front end and plays an important role in establishing all the functionalities that will make an application beneficial to the target audience.

If this has inspired you and you want to learn more about our service, go to baserow.io and sign up for free now!

What’s your story? Tell us how you use Baserow