FlutterFlow Docs
Search…
Actions
Passing Data
While building your app, you might need to pass through data from one page to another. For example, sending a todo item from the first page (when the user taps on the ListView item) to the next page (showing todo details).
Passing data can only be tested in Run and Test Mode (it can not be tested in Preview Mode).
Passing todo item to next page

How to pass data

To pass any data, first, you need to define the parameter(s) on the next page. This will be used to carry value from the previous page. Now from the first page, you need to send the parameter value inside the navigate action (which opens the next page). Then, on the next page, you can use the parameter value just like you set the value from a variable.
The figure below illustrates the data passing flow:
Data passing flow

What you can pass

You can pass any supported data from one page to another via page parameter(s). You can think of a page parameter as a variable that holds the value being passed from one page to another.
If you are using Firestore Database, most of the time, you would pass the Document (an actual record inside the Firestore collection) and Document Reference (points to actual document) between the pages.

When to use which data type

Let's see what all types of data you can pass and when to use them:
  • Integer: Use it to pass numbers such as 100, 4302, 50000, etc.
  • Double: Use it to pass a decimal number such as 12.43, 3233.50, 65.5666, etc.
  • String: Use it to pass plain text such as title, description, etc.
  • Image Path: Use it to pass the URL of the uploaded image.
  • Video Path: Use it to pass the URL of the uploaded video.
  • Audio Path: Use it to pass the URL of the uploaded audio.
  • Boolean: Use it to pass either a True or False value.
  • Document Reference: Use it to pass a reference of a document. Passing a document reference helps you fetch the document data. For example, fetching user's details based on the user reference.
  • Document: Use it to pass the actual document (i.e., a Firestore document). For example, passing the whole todo item to the next page.
  • Timestamp: Use it to pass the date and time value.
  • JSON: Use it to pass the JSON value such as {"firstName":"John", "lastName":"Doe"}.
  • TimestampRange: Use it to pass the start date-time and end date-time values.
  • Lat Lng: Use it to pass the latitude and longitude of a particular place.
  • GooglePlace: Use it to pass the GooglePlace data.

Common use cases for passing data

This section provides instructions on how to build some everyday use cases in your app.
Here are they:

1. Passing data from one page to another

In this section, you'll build an example that sends the typed message to the next page.
Sending a message to the next page
The steps to pass data from one page to another are as follows:
If you have already created your pages, you can skip to Step 3.

1.1 Building the first page

Before you pass any data to the next page, you must have some data on the first page. For that, you can add a TextField to the page that allows users to enter any message.
Here's how you can do that:
  • Create/Select a page.
  • Add a TextField inside the Column and set the appropriate Name.
  • Add a Button to send data and change its text to Send.
Building the first page

1.2 Building the second page

Now, create a second page to receive the data. To show a message on the second page, simply add a Text widget to a page.
Building the second page

1.3 Add a parameter on the second page

The parameter on the second page is created to hold the data received from the first page.
To add a parameter:
  • Select the second page. If you are on the widget tree, select the first widget (i.e. pagename).
  • On the right side, find the Page Parameters section and click on the + button.
  • Click on + Add Parameter and enter the parameter name (e.g., message).
  • Set the Type to String. This allows you to accept a plain text value from the previous page.
  • Click Confirm.
Add a parameter on the second page

1.4 Pass data from the first page

To pass data from the first page:
  • Select the first page.
  • Select Button from the widget tree or the canvas area.
  • Select Actions from the Properties panel (the right menu), and click + Add Action.
  • Search and select the Navigate To action.
  • Select the page you want to navigate to (e.g. PageB).
  • Click on the Pass button below. Now the parameter (created on the second page) will be displayed. Tip: You can also define a new parameter for the second page from here itself by clicking on the + Define button.
  • Click on the Parameter name and set the Value Source to From Variable. This will open a popup on the left side.
  • Now select Widget State -> TextFieldName (that accepts the message).
Pass data from the first page

1.5 Showing parameter value in UI element

To show data from parameters into the Text widget:
  • Select the second page.
  • Select the Text widget, move to the properties panel, and click Set from Variable. This will open a popup on the left side.
  • Select the parameter name (defined on this page).
  • Set the Default Variable Value if you wish to. This will be displayed in case the parameter value is empty.
  • Click Confirm.
Showing parameter value in UI element

2. Passing an item from a ListView to a details page

In this section, you'll build an example that sends a Todo item from a ListView to a details page.
Passing record from ListView to details page
Passing a record from a ListView to a details page includes the following steps:
If you have already created your pages, you can skip to Step 3.

2.1 Building a ListView page

Create a page with ListView and display the Todo items from the Firestore collection using the instructions here.

2.2 Building a details page

To create a page that shows the Todo item details:
  • Create/select the details page and give it a name.
  • Select the Column widget, set its Padding 10 to all sides, and Cross Axis Alignment to Start to align all the texts on the left side.
  • Add a Text widget to show the Title.
  • Add another Text widget to show the Description.
  • Add one more Text widget to show the Date.
Building a details page

2.3 Adding parameter on the details page

To add a parameter:
  • Select the details page and then select the first widget with the page name (i.e. pagename).
  • On the right side, find the Page Parameters section and click on the + button.
  • Click on + Add Parameter and enter the parameter name (e.g. todoItem).
  • Set the Type to Document. This allows you to carry a single document/record from the previous page.
  • Set the Collection Type to the Firestore collection that holds the todo data.
  • Click Confirm.
Adding a parameter on the details page

2.4 Passing item from the ListView page

An item inside the ListView can be passed to another page by adding a navigate action.
To add an action:
  • Select the first page (page with ListView).
  • Select ListTile from the widget tree or from the canvas area.
  • Select Actions from the Properties panel (the right menu), and click + Add Action.
  • Search and select the Navigate To action.
  • Select the page you want to navigate to.
  • Click on the Pass button below. Now the parameter (created on the second page) will be displayed. Tip: You can also define a new parameter for the second page from here itself by clicking on the + Define button.
  • Click on the UNSET, select the [collection_name] Document and then select Document (colleciton_name).
  • Click Confirm.
Passing the item from the ListView page

2.5 Show the item details from the parameter

Once the item is passed from the previous page, you can display it using the parameter defined on the Details page.
To display item information from parameter:
  • Select the Details page.
  • Select the Text widget.
  • Move to the Properties panel and click on the Set from Variable. This will open a popup on the left side.
  • Select the parameter name (defined on this page).
  • Set the Document Properties to the Field that you want to display.
  • Click Confirm.
Show the item details from the parameter

3. Passing a document reference to another page

A Document Reference points to the location where the record (actual data) resides in the Firestore collection. You can use the document reference to retrieve the data associated with that record. For example, you could use the user document reference inside the Todo document to retrieve information associated with a user's account (e.g., name, location, etc.).
User's document reference inside the Todo document
In Firestore Data Manager, the document reference looks like this:
Todo collection
When you should pass document reference
Sometimes, when you pass data to another page, you may not have all the data you want to pass. In this case, you can pass a document reference and create a query to pull the required information.
Here's an example of this situation:
  • The Todo detail page shows the profile picture of the user who created it.
  • When a user clicks on the profile photo on the Todo Details Page, you want to open the next page (i.e. UserDetails) that shows the user's additional information such as user name and email.
  • But the Todo Details page only contains the user photo and does not have the additional information you want to display.
For this situation, you'll build an example that passes the document reference of the user to the next page and then query additional user details.
Example of passing document reference to another page
Passing a document reference to another page includes the following steps:
If you have already created your pages, you can skip to Step 3.

3.1 Building Todo details page (first page)

To show a list of documents (query collection), find the instructions here.
To show a single document data, follow the instruction here.
The Todo details page looks like this:
Todo detail page (first page)

3.2 Building a user details page (second page)

To create a user details page:
  • Create/select the user details page and give it a name.
  • Select the Column widget and set its Padding to 10 and Cross Axis Alignment to Stretch.
  • Add a CircleWidget widget to show the profile picture.
  • Add another Text widget to show the user name.
  • Add one more Text widget to show the user's email.
Building a user details page

3.3 Adding a parameter on the user details page

To add a parameter:
  • Select the User Details page and then select the first widget with the page name (i.e. pagename).
  • On the right side, find the Page Parameters section and click on the + button.
  • Click on + Add Parameter and enter the parameter name (e.g. userReference).
  • Set the Type to DocumentReference. This allows you to carry a single document/record reference from the previous page.
  • Set the Collection Type to the Firestore collection that holds the Todo data.
  • Click Confirm.
Adding a parameter on the user details page

3.4 Passing item reference

A document reference can be passed to another page by adding a navigate action and passing a reference in a parameter on the tap of any widget.
To add an action:
  • Select the first page (page with ListView).
  • Select ListTile from the widget tree or from the canvas area.
  • Select Actions from the Properties panel (the right menu), and click + Add Action.
  • Search and select the Navigate To action.
  • Select the page you want to navigate to.
  • Click on the Pass button below. Now the parameter (created on the second page) will be displayed. Note: You can also define a new parameter for the second page from here itself by clicking on the + Define button.
  • Set the Source to a document and then set the Document Properties to the Field that holds the document reference (e.g., created_by field).
  • Click Confirm.
Passing item reference

3.5 Query a document based on document reference

Once you have access to the document reference you can use it to query the additional information on a page or a widget. The ideal place to query a document is at the page level, so you can access the document data from anywhere within a page.
  • Select the next page (User details).
  • Click on the Backend Query tab (on the right side of your screen).
  • Set the Query Type to Document from Reference.
  • Scroll down to find the Collection dropdown and change it to your collection.
  • Click on the UNSET and select the parameter name that holds the document reference.
  • Click Confirm.
Query a document based on document reference

3.6 Showing data in UI elements

To show user's data on the user details page:
  • Select the Image Widget.
  • Move to property editor and scroll down to the path property.
  • Click on the Set from Variable text. This will open a popup on the left side.
    • Select the document (retrieved in the previous step) as a source (e.g. [collection_name] Document).
    • Now select the field that holds the image URL path.
  • Select the Text Widget.
  • Move to the Properties panel and click on the Set from Variable. This will open a popup on the left side.
    • Select the document (retrieved in the previous step) as a source (e.g. [collection_name] Document).
    • Now select the field that holds the image URL path.
  • Similarly, show the data for other UI elements.
Showing data in UI elements