Comment on page
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
To build such an app, you will need the following pages.
- 1.Login: This page allows you to log in.
- 2.HomePage: After successful login, this page will open. It shows a list of all passengers.
- 3.PassengerDetails: This shows passenger details.
- 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:
By default, the new project is created with a page called HomePage.
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.
- 1.
- 2.
- 4.
- 5.
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
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)
This gets passenger details based on the Id.
get
https://api.instantwebtools.net/v2/passenger/6332e94ef699ea26812b7fb5
getPassengersDetails

getPassengersDetails (Headers)

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

updatePassengerName (Headers)

updatePassengerName (Body)

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

deletePassenger (Headers)

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

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

UpdatePassenger page
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 an app 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
Once the user is logged in, you can retrieve and display the passenger listing from the API call into ListView.
To do so:
- 1.Query a getPassengers API call on a ListView. While doing so, you can Enable Pull to Refresh to see the new changes.
- 3.
You can also display a list of passengers using the custom data type. See how to use custom data type in API.
On the same page, On tap of IconButton (Inside the Appbar), you can log out a user by clearing the token value in an app state variable (using the Update app state) followed by the Navigate Back action.
Here is how it looks:

Logout a user
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:
- 1.
- 2.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.
- 3.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.
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.Query a getPassengersDetails API call on a page (i.e., page name) and pass the passenger Id from page parameters.
- 2.
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 an Id will be required while calling the updatePassengerName API call.
To do so:
- 1.
- 2.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.
- 3.After defining the parameter, open this action again and pass the passenger id from the page parameter and passenger name using the JSON path.
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:
- 1.First, set the TextField initial value with the passenger name from the page parameter.
- 2.On the update button, add an action to trigger the updatePassengerName API call. If the call succeeds, show a success message and navigate back; otherwise, only display the error message.
Here is how it looks:

Update 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
Last modified 1mo ago