FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Search
⌃K
Links

REST API Example: Airline Passengers

This page walks you through building an app that shows Airline passenger names (retrieved from API calls) for the logged-in users. Users can see the list of all passenger names. Tapping on a name, the user is navigated to the passenger details screen. On the passenger details, the user can edit the passenger name and delete the passenger.
The final app looks like this:
Passenger names (API example app)
What you'll learn
  • How to create and test APIs
  • How to pass auth token.
  • Creating API with dynamic URL.
  • How to pass query parameters.
  • How to create request body in JSON & x-www-urlencoded formats.
  • Creating variables and using them in APIs.
  • Creating JSON path.
  • How to navigate and pass data to a new page

Building an App

To build such an app, you will need the following pages.
  1. 1.
    Login: This page allows you to log in.
  2. 2.
    HomePage: After successful login, this page will open. It shows a list of all passengers.
  3. 3.
    PassengerDetails: This shows passenger details.
  4. 4.
    UpdatePassenger: This allows you to update the passenger details.
The following flow illustrates how these pages will work together:
Passenger names app flow
The steps to build the app are as follows:

1. Create a new project

The very first step starts with creating a new project.
By default, the new project is created with a page called HomePage.

2. Create and test APIs

For building this example, we will be using passenger APIs from instantwebtools.com. Before you build anything related to APIs in your app, you must create and test the APIs to make sure all the APIs are working correctly and giving responses as expected.
For this app, create and test the following APIs your project:

2.1 Login

The username and passwords will be sent to this API as an x-www-urlencoded request body.
post
https://dev-457931.okta.com/oauth2/aushd4c95QtFHsfWt4x6/v1/token
Login
Login API

2.2 getPassengers

This API retrieves all passengers.
get
https://api.instantwebtools.net/v2/passenger?page=0&size=10
getPassengers
getPassengers API call (Headers)
getPassengers API call (Variables)

2.3 getPassengersDetails

This gets passenger details based on the Id.
get
https://api.instantwebtools.net/v2/passenger/6332e94ef699ea26812b7fb5
getPassengersDetails
getPassengersDetails (Headers)
getPassengersDetails (Variables)

2.4 updatePassengerName

This updates the passenger name based on the Id.
patch
https://api.instantwebtools.net/v2/passenger/6332e94ef699ea26812b7fb5
updatePassengerName
updatePassengerName (Headers)
updatePassengerName (Body)
updatePassengerName (Variables)

2.5 deletePassenger

This deletes the passenger based on the Id.
delete
https://api.instantwebtools.net/v2/passenger/6332e94ef699ea26812b7fb5
deletePassenger
deletePassenger (Headers)
deletePassenger (Variables)

3. Building UI

Now, it's time to start building the UI. Here, we will build the UI for all the pages.

3.1 Login page

On this page, add two TextField (one for email and another for password) widgets and a Button. Here is how it should look:
Login page
3.2 HomePage
Here you will display the list of all passengers using ListView and ListTile widgets. You can also add an IconButton widget inside the Appbar to log out a user.
Here is how it looks:
HomePage
3.3 PassengerDetails page
This page will show the passenger's details on Text widgets. Also, add two IconButton inside the Appbar to update and delete the passenger.
PassengerDetails page
3.4 UpdatePassenger page
This page will allow updating the passenger name using the TextField and a Button widget.
UpdatePassenger page

4. Login a user

Now that we have APIs and UI ready, let's start by integrating the login API call.
First, on the login button, add an action to trigger the login API. If the call succeeds, store the authorization token in a local state variable and navigate to the home page. And if the call fails, show the error message using Snackbar.
Here is how it looks:
Login action
Additionally, when the login page is loaded, you can check if the token is already present (i.e., the user is already logged in) and navigate to the home page.
Check if a user is already logged in

5. Show a list of passengers

Once the user is logged in, you can retrieve and display the passenger listing from the API call into ListView.
To do so:
  • ​Query a getPassengers API call on a ListView. While doing so, you can Enable Pull to Refresh to see the new changes.
  • ​Generate dynamic children.
  • Display the passenger name from an API call on the Text widget. See how to do it here.
Show list of passengers
On tap of IconButton (Inside the Appbar), you can log out a user by adding the Update local state followed by the Navigate Back action.
Here is how it looks:
Logout a user

6. Navigate to the passenger details page

On tapping the passenger name (ListView > ListTile widget), you will navigate to the PassengerDetails page and pass the passenger Id. This Id will be used to retrieve the full details of the passenger in the next step.
To do so:
  • Select the ListTile widget and add an action to navigate to the PassengerDetails page.
  • Inside this action, click on the Define button. This will open the PassengerDetails page, where you can define a parameter that will accept the passenger Id.
  • After defining the parameter, open this action again and pass its value From Variable > [dynamic_children_variable_name] item and set it to a JSON path that retrieves the passenger Id.
Navigate to the passenger details page

7. Show passenger details

Whenever this page opens, it will have the passenger Id (as a page parameter). You can use this passenger Id while making an API call that will receive the complete passenger details based on this.
To do so:
  1. 1.
    ​Query a getPassengersDetails API call on a page (i.e., page name) and pass the passenger Id from page parameters.
  2. 2.
    Display the passenger details from an API call on the Text widgets. See how to do it here.
Show passenger details

8. Navigate to update the passenger page

From the PassengerDetails page, on tapping the edit icon (inside the Appbar), you will navigate to the UpdatePassenger page with the passenger name and Id. The passenger name will be used to set the initial value for the TextField, and Id will be required while calling the updatePassengerName API call.
To do so:
  • Select the edit IconButton and add an action to navigate to the UpdatePassenger page.
  • Inside this action, click on the Define button. This will open the UpdatePassenger page, where you can define a parameter that will accept the passenger Id and name.
  • After defining the parameter, open this action again and pass the passenger id from the page parameter and passenger name using the JSON path.
Navigate to update the passenger page

9. Update passenger

On this page, you have a TextField widget to display the current name and a button to trigger the updatePassengerName API call.
To update passenger details:
Here is how it looks:
Update passenger

10. Delete passenger

From the PassengerDetails page, tapping the delete icon (inside the Appbar) will delete the current user and navigates back to the previous page. Here the passenger Id will be required while triggering the deletePassenger API call.
To do so, select the delete IconButton and add an action to trigger the deletePassenger API call. If the call succeeds, show a success message and navigate back; otherwise, only display the error message.
Delete Passenger

Get the example app

Get the clonable version of this app here.
Previous
Create & Test API Call
Next
SOAP API Example: Countries
Last modified 1mo ago