Passing Data
As you build your app, you'll often encounter the need to pass through or transfer data from one page to another. For instance, when a user taps on a ListView item, you may want to send a todo item to the next page to display its details.
This process of passing data between pages is accomplished using parameters.
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
To enable data passing between pages, start by defining the parameter(s) on the destination page. Next, on the first page, add the navigate action and pass the desired parameter value. On the subsequent page, you can utilize the parameter value just as you would with any other variable.
The figure below illustrates the data passing flow:

Data passing flow
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.
Let's see what all types of data you can pass and when to use them:
- Integer: To pass numbers such as 100, 4302, 50000, etc.
- Double: To pass a decimal number such as 12.43, 3233.50, 65.5666, etc.
- String: To pass plain text such as title, description, etc.
- Image Path: To pass the URL of the uploaded image.
- Video Path: To pass the URL of the uploaded video.
- Audio Path: To pass the URL of the uploaded audio.
- Boolean: To pass either a True or False value.
- Color: To pass color value.
- Document Reference: 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: To pass the actual document (i.e., a Firestore document). For example, passing the whole todo item to the next page.
- DateTime: To pass the date and time value.
- JSON: To pass the JSON value such as
{"firstName":"John", "lastName":"Doe"}
. - TimestampRange: To pass the start date-time and end date-time values.
- Lat Lng: To pass the latitude and longitude of a particular place.
- GooglePlace: To pass the GooglePlace data.
- Uploaded File (Bytes): To pass the uploaded file in Bytes.
This section provides instructions on how to build some everyday use cases in your app.
Here are they:
Let's see how to send 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:

First 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.

Second page
The parameter on the second page will be used to hold the data from the first page.
To add a parameter:
- 1.Select the second page.
- 2.On the right side, find the Page Parameters section and click on the + button.
- 3.Click on + Add Parameter and enter the Parameter Name (e.g., message).
- 4.Set the Type to String and check the Required option because this parameter is mandatory(must contain a value) for this page to work. This allows you to accept a plain text value from the previous page.
- 5.Optionally you can also add a default value to this parameter which will be displayed if the incoming value is null or empty.
- 6.Click Confirm.
To pass data from the first page:
- 1.
- 2.Select the page you want to navigate to (e.g., PageB).
- 3.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.
- 4.Click on the parameter name. This will open the set from variable menu.
- 5.Now select Widget State -> TextFieldName (that accepts the message).
To show data from parameters in the Text widget:
- 1.Select the second page.
- 2.Select the Text widget, move to the properties panel, and click Set from Variable.
- 3.Select the Page Parameters > parameter name (defined on this page).
- 4.Click Confirm.
Let's see how to pass the ListView items (from Firestore Database or API call) to the next page (e.g., a details page).

Passing record from ListView to the details page
Passing a record from a ListView to a details page includes the following steps:

Details page
To add a parameter:
- 1.Select the details page and then select the first widget with the page name.
- 2.On the right side, find the Page Parameters section and click on the + button.
- 3.Click on + Add Parameter and enter the parameter name (e.g., todoItem).
- 4.Set the Type of item you will receive on this page.
- 1.To receive the Firestore document, set it to Document and choose the Collection Type. This allows you to carry a single document/record from the previous page.
- 2.To receive the item of API response, set it to JSON.
- 5.Click Confirm.

Adding parameter to receive Firestore Document

A parameter that will receive JSON item from API call
To do so:
- 1.
- 2.While adding this action, 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 next page from here itself by clicking on the + Define button.
- 3.Click on the UNSET and select the source of the item:
- 1.To pass the Firestore Document, select the [collection_name] Document and then select Document (collection_name).
- 2.To pass the item of API response, select the [dynamic_children_variable_name] item.
- 4.Click Confirm.
Passing Firestore Document
Passing item from API response
Once the item is passed to the next page, you can display it using the parameter.
To display item information from parameter:
- 1.Select the Details page.
- 2.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.
- 3.Select the Page Parameters > parameter name (defined on this page).
- 1.If it's a Firestore Document, set the Document Properties to the Field that you want to display.
- 2.If it's a JSON, set the Available Options to JSON Path and JSON Path to the custom JSON path. See how to create a JSON path.
- 4.Click Confirm.
Show the item (Firestore Document) details
Show the item (API response - JSON) details
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 additional data associated with that record. For example, you could use the user document reference inside the Todo document to identify the user and its details (e.g., name, location, etc.).
.png?alt=media&token=98563ec3-0ca4-44a5-8ebb-d07fd316afc9)
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, it might not contain all the data to be displayed on the another page. In that case, you can pass a document reference and add 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:
The Todo details page looks like this:

Todo detail page (first page)

User details page
To add a parameter:
- 1.Select the User Details page and then select the first widget with the page name.
- 2.On the right side, find the Page Parameters section and click on the + button.
- 3.Click on + Add Parameter and enter the parameter name (e.g., userReference).
- 4.Set the Type to DocumentReference. This allows you to carry a single document/record reference from the previous page.
- 5.Set the Collection Type to the Firestore collection that holds the data.
- 6.Click Confirm.
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:
- 1.Select the first page (page with ListView).
- 2.Select ListTile, head over to Properties Panel > Actions and click + Add Action.
- 3.Search and select the Navigate To action.
- 4.Select the page you want to navigate to.
- 5.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.
- 6.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).
- 7.Click Confirm.
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 that you can access the document data from anywhere within a page.
- 1.Select the next page (User details).
- 2.Click on the Backend Query tab (on the right side of your screen).
- 3.Set the Query Type to Document from Reference.
- 4.Scroll down to find the Collection dropdown and change it to your collection.
- 5.Click on the UNSET and select the parameter name that holds the document reference.
- 6.Click Confirm.
To show data on the user details page:
- 1.Select the Image widget, move to the property panel, and scroll down to the path property.
- 2.Click on the Set from Variable text. This will open a popup on the left side.
- 1.Select the document (retrieved in the previous step) as a source (e.g., [collection_name] Document).
- 2.Now select the field that holds the image URL path.
- 3.Similarly, show the data for other UI elements.
If you prefer watching a video tutorial, here's the one for you:
Last Updated Date: September 5, 2023
Last modified 26d ago