FlutterFlow Docs Troubleshooting Guides Ask or Search ⌘+K

BUILDING UI

REST API
UI & Layout 101 Building an App
Widgets
Example:
1. Create a new project

Component 2. Create and test APIs

Animations Airline Login

Theme Settings Passenge getPassengers

Design System rs getPassengersDetails

updatePassengerName
Colors
This page walks you deletePassenger
Typography & Icons
through building an 3. Building UI
Theme Widgets app that shows airline
4. Login a user
passenger names
Flows 5. Show a list of passengers
(retrieved from API
Responsive Layouts: 101 calls) for the logged-in 6. Navigate to the passenger
details page
users. Users can see
ACTIONS
the list of all passenger 7. Show passenger details
Actions names. Tapping on a 8. Navigate to update the
name, the user is passenger page
DATA AND BACKEND
navigated to the 9. Update passenger
Firebase passenger details
10. Delete passenger
Supabase screen. On the
Get the example app
passenger details, the
Custom Authentication
user can edit the
Was this helpful?
Passing Data passenger name and
Searching Data delete the passenger.

State Management
The final app looks like
API Calls this:

API Calls 101

Create & Test API Call

REST API Example: Airline

Passengers

SOAP API Example: Countries

Passenger names (API

example app)

What you'll
learn
Backend Query How to
create and
Showing Data in UI Elements
test APIs
Custom Data Types
How to pass
auth token
CUSTOMIZING YOUR APP
Creating API
Custom Functions
with
Powered
Cloud by GitBook
Functions 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. 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:

1. Create a new
project

2. Create and test APIs

3. Building UI

4. Login a user
5. Show a list of
passengers

6. Navigate to the
passenger details
page

7. Show passeger
details

8. Navigate to update
the passenger page
9. Update passenger

10. Delete passenger

1. Create a new
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 for your project:

1. Login

2. getPassengers
3. getPassengersDetail
s

4. updatePassenger
5. deletePassenger

2.1 Login

The username and

The username and
passwords will be sent
to this API as an x-
www-urlencoded
request body.

Login
POST
https://dev-
457931.okta.com/oau
th2/aushd4c95QtFHsf
Wt4x6/v1/token

Request Body

Name Type

username* String

password* String

scope* String

grant_type String

client_id String

200: OK

{
"token_type": "Bearer",
"expires_in": 3600,
"access_token": "eyJraWQiOiJwS0lIX2oycDlUM1gtUjF
"scope": "offline_access",
"refresh_token": "iopUf58AwQL157i3zNeIBh08LkwCrv
}

See how to send

the request body
in x-www-
urlencoded
format.
 Login API

2.2 getPassengers

This API retrieves all

passengers.

getPasseng
ers
GET
https://api.instant
webtools.net/v2/pas
senger?
page=0&size=10

Query Parameters

Name Type

page Integer

size Integer

Headers

Name Type

Authorization String

200: OK

{
"totalPassengers": 897,
"totalPages": 90,
"data": [
{
"_id": "6332e9b5f699ea07f22b87cc",
"name": "evin frye",
"trips": 300,
"airline": [
{
 {
"id": 3,
"name": "Cathay Pacific",
"country": "Hong Kong",
"logo": "https://upload.wikimedi
"slogan": "Move Beyond",
"head_quaters": "Cathay City, Ho
"website": "www.cathaypacific.co
"established": "1946"
}
],
"__v": 0
},
{
"_id": "6332e9d3f699ea7f602b8a06",
"name": "John Doe",
"trips": 250,
"airline": [
{
"id": 5,
"name": "Eva Air",
"country": "Taiwan",
"logo": "https://upload.wikimedi
"slogan": "Sharing the World, Fl
"head_quaters": "376, Hsin-Nan R
"website": "www.evaair.com",
"established": "1989"
}
],
"__v": 0
},
{
"_id": "6332ee8cf699ead3452bdecd",
"name": "John Doe",
"trips": 250,
"airline": [
{
"id": 5,
"name": "Eva Air",
"country": "Taiwan",
"logo": "https://upload.wikimedi
"slogan": "Sharing the World, Fl
"head_quaters": "376, Hsin-Nan R
"website": "www.evaair.com",
"established": "1989"
}
],
"__v": 0
},
{
"_id": "6332eeb6f699ea7c5c2be1b2",
"name": "John Doe",
"trips": 250,
"airline": [
{
"_id": "6332ed09f699ea61ca2bc38e
"id": 1115,
"name": "Indian Airways",
 "name": "Indian Airways",
"country": "India",
"logo": "https://upload.wikimedi
"slogan": "From India",
"head_quaters": "Nagpur, India",
"website": "www.indianairways.co
"established": "2022",
"__v": 0
}
],
"__v": 0
},
{
"_id": "6332eec9f699eaf4f42be309",
"name": "AMIT L",
"trips": 250,
"airline": [
{
"_id": "6332ed09f699ea61ca2bc38e
"id": 1115,
"name": "Indian Airways",
"country": "India",
"logo": "https://upload.wikimedi
"slogan": "From India",
"head_quaters": "Nagpur, India",
"website": "www.indianairways.co
"established": "2022",
"__v": 0
}
],
"__v": 0
},
{
"_id": "6332ef45f699eabd3b2beb49",
"name": "AMIT L",
"trips": 250,
"airline": [
{
"_id": "6332ed09f699ea61ca2bc38e
"id": 1115,
"name": "Indian Airways",
"country": "India",
"logo": "https://upload.wikimedi
"slogan": "From India",
"head_quaters": "Nagpur, India",
"website": "www.indianairways.co
"established": "2022",
"__v": 0
}
],
"__v": 0
},
{
"_id": "6332eff9f699ea4f592bf75f",
"name": "John Doe",
"trips": 250,
"airline": [
{
 {
"id": 5,
"name": "Eva Air",
"country": "Taiwan",
"logo": "https://upload.wikimedi
"slogan": "Sharing the World, Fl
"head_quaters": "376, Hsin-Nan R
"website": "www.evaair.com",
"established": "1989"
}
],
"__v": 0
},
{
"_id": "6332eff9f699eab26f2bf772",
"name": "evie frye",
"trips": 300,
"airline": [
{
"id": 8,
"name": "Thai Airways",
"country": "Thailand",
"logo": "https://upload.wikimedi
"slogan": "Smooth as Silk / I Fl
"head_quaters": "Jom Phol Subdis
"website": "www.thaiairways.com"
"established": "1960"
}
],
"__v": 0
},
{
"_id": "6332f075f699ea3eb22bffc3",
"name": "John Doe",
"trips": 250,
"airline": [
{
"id": 5,
"name": "Eva Air",
"country": "Taiwan",
"logo": "https://upload.wikimedi
"slogan": "Sharing the World, Fl
"head_quaters": "376, Hsin-Nan R
"website": "www.evaair.com",
"established": "1989"
}
],
"__v": 0
},
{
"_id": "6332f076f699ea71d42bffd6",
"name": "evie frye",
"trips": 300,
"airline": [
{
"id": 8,
"name": "Thai Airways",
"country": "Thailand",
 "country": "Thailand",
"logo": "https://upload.wikimedi
"slogan": "Smooth as Silk / I Fl
"head_quaters": "Jom Phol Subdis
"website": "www.thaiairways.com"
"established": "1960"
}
],
"__v": 0
}
]
}

See how to pass

the dynamic auth
token and query
parameters.

getPassenge getPasseng
rs API call ers API call
(Headers) (Variables)

2.3
getPassengersDetails

This gets passenger

details based on the Id.

getPasseng
ersDetails
GET
https://api.instant
webtools.net/v2/pas
senger/6332e94ef699
ea26812b7fb5

Headers

Name Type

Authorization String

200: OK
 200: OK

{
"_id": "6332e9b5f699ea07f22b87cc",
"name": "evin frye",
"trips": 300,
"airline": [
{
"id": 3,
"name": "Cathay Pacific",
"country": "Hong Kong",
"logo": "https://upload.wikimedia.org/wi
"slogan": "Move Beyond",
"head_quaters": "Cathay City, Hong Kong
"website": "www.cathaypacific.com",
"established": "1946"
}
],
"__v": 0
}

getPasseng getPasseng
ersDetails ersDetails
(Headers) (Variables)

2.4
updatePassengerNam
e

This updates the

passenger name based
on the Id.

updatePass
engerName
PATCH
https://api.instant
webtools.net/v2/pas
senger/6332e94ef699
ea26812b7fb5

Headers

Name Type
Authorization String

Request Body

Name Type

name String

See how to send

the request body
in JSON format.

update update update

Passen Passen Passen
gerNa gerNa gerNa
me me me
(Heade (Body) (Variabl
rs) es)

2.5 deletePassenger

This deletes the

passenger based on
the Id.

deletePasse
nger
DELETE
https://api.instant
webtools.net/v2/pas
senger/6332e94ef699
ea26812b7fb5

Headers

Name Type

Authorization String
deletePasse deletePasse
nger nger
(Headers) (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 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.

This can be
handled
automatically if
you add a
custom
authentication.

Check if a user is already

logged in

5. Show a list

of passengers
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:

1. Query a
getPassengers API
call on a ListView.
While doing so, you
can Enable Pull to
Refresh to see the
new changes.
2. Generate dynamic
children.

3. Display the
passenger name
from an API call on
the Text widget. See
how to do it here.

You can also

display a list of
passengers using
the custom data
type. See how to
use custom data
type in API.

S…

1
min

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

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

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:

1. Select the ListTile

widget and add an
action to navigate to
the
PassengerDetails
page.
2. Inside this action,
click on the Define
button. This will
open the
PassengerDetails
page, where you

can define a
 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.

N…

47
sec

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. Query a
getPassengersDetail
s API call on a page
(i.e., page name)
and pass the
passenger Id from
page parameters.

2. Display the
2. Display the
passenger details
from an API call on
the Text widgets.
See how to do it
here.

S…
55
sec

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 an Id will
be required while
calling the
updatePassengerName
API call.

To do so:

1. Select the edit

IconButton and add
an action to
navigate to the
UpdatePassenger
page.

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.

N…

1
min

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:

1. First, set the

TextField initial
value with the
passenger name
from the page

parameter.
 parameter.
2. On the update
button, add an
action to trigger the
updatePassengerNa
me 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

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;
navigate back;
otherwise, only display
the error message.

Delete Passenger

Get the
example
app
Get the clonable
version of this app
here.

P
re
N
vi
ex
o
t
u
s S
C O
r A
e P
a cookies
This site uses A to deliver its service and to analyse
Last updated
tra!c. 5 months
Bytbrowsing this site, you accept the privacy policy.
PI
ago
e E
Accept Reject
& x
T a
e m
s pl
t e:
A C
P o
I u
C n
a tr
ll ie
s