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 between pages is done with the help of 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 pass any data, first, you must define the parameter(s) on the next page. Now on the first page, add the navigate action and pass the parameter value. 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
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: 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.
This section provides instructions on how to build some everyday use cases in your app.
Here are they:
- 1.
- 2.
- 3.
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:
- 1.
- 2.
- 4.
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
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
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
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
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.
- 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
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:
- 1.
- 2.
- 4.
Details page
To add a parameter:
- Select the details page and then select the first widget with the page name.
- 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 of item you will receive on this page.
- 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.
- To receive the item of API response, set it to JSON.
- Click Confirm.
Adding parameter to receive Firestore Document
A parameter that will receive JSON item from API call
To do so:
- 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.
- Click on the UNSET and select the source of the item:
- To pass the Firestore Document, select the [collection_name] Document and then select Document (collection_name).
- To pass the item of API response, select the [dynamic_children_variable_name] item.
- Click Confirm.
Passing Firestore Document
Passing item from API response
Passing the item (Firestore Document)
Passing the item (API response)
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).
- If it's a Firestore Docuement, set the Document Properties to the Field that you want to display.
- 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.
- Click Confirm.
Show the item (Firestore Document) details
Show the item (API response - JSON) details
Show the item (Firestore Document) details from the parameter
Show the item (JSON) details from the parameter
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.).
.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, 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.
The Todo details page looks like this:
Todo detail page (first 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
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
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 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
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.
- 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
To show data on the user details page:
- Select the Image widget, move to the property panel, 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
Last modified 4mo ago