FlutterFlow Docs
Search…
Passing Data
While developing your app, you may need to pass data to another page. For example, sending a Todo item from ListView to the Details page.

Basics of Passing Data

To pass any data from one page to another, you will need the help of parameters. You can think of a parameter as a variable that holds the value being passed from one page to another.
Parameters are always defined for the page receiving the value and the values are passed by the sender page. The examples below will demonstrate this.
The following data types are available while defining the parameters.
  • Integer: To pass/receive numbers such as 100, 4302, 50000, etc.
  • Double: To pass/receive a decimal number such as 12.43, 3233.50, 65.5666, etc.
  • String: To pass/receive plain text such as title, description, etc.
  • Image Path: To pass/receive the URL of the uploaded image.
  • Video Path: To pass/receive the URL of the uploaded video.
  • Audio Path: To pass/receive the URL of the uploaded audio.
  • Boolean: To pass/receive either a true or false value.
  • Record Reference: To pass/receive a reference of a document. Passing a record reference helps you fetch the document data.
  • Record: To pass/receive the actual record i.e a Firestore document.
  • Timestamp: To pass/receive date and time value.
  • JSON: To pass/receive the JSON value such as {"firstName":"John", "lastName":"Doe"}.
  • TimestampRange: To pass/receive the start date-time and end date-time values.
  • Lat Lng: To pass/receive the latitude and longitude of a particular place.
  • GooglePlace: To pass/receive the GooglePlace data.
Let's try out the basics for passing data by creating a page that sends the message from one page to another. Here you can see the typed message is being passed from one page to the next.

Common Use Cases For Passing Data

In this section, we provide instructions on how to set up the following:

Passing Data From One Page To Another

This example demonstrates how you can send data from one page to another using the following steps:
If you have already created your pages, you can skip to Step 3.

1. Create A Page To Generate The Data

You will first need to create a page that generates the data.
As an example, let's create a page with a TextField and a Button:
  • Create/Select a page.
  • Drag the Column widget from the Layout Elements tab.
  • Add a TextField (under Form Elements) inside the Column and set the appropriate Name.
  • Add a Button to send data.

2. Create A Page To Receive The Data

Now, let's create a second page to receive the data:
To show a message on the second page, simply add a Text widget to a page.

3. Add Parameter on 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.
  • Navigate to right and click on the Define parameter icon
    ​
  • Click on + Add Parameter and enter the parameter name (e.g. message).
  • Set the Type to String. Setting the Type to String allows you to accept a plain text value from the previous page.
  • Click Save.

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 from the canvas area.
  • Click on the Actions tab (on the right side of your screen).
  • Click on + Add Action and select the On Tap option.
  • Find the Action Type dropdown and change it to Navigate.
  • Under the Navigate To, click on the No Page Selected and choose the second page.
  • Click on the Pass button below. Now the parameter (created on the second page) will be displayed. 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.
  • Set the Source to Widget State.
  • Set the Available Options to the Name of the TextField.

5. Showing Data From The Parameter On The Second Page

To show data from parameter into the Text widget:
  • Select the second page.
  • Select the Text widget.
  • Move to Property editor and click on the Set from Variable.
  • Click on the Source dropdown and set it to the parameter name that holds the data.
  • Click Save.

Passing A Record From A ListView to A Details Page

A common use case of passing data between pages is, passing an item from a list to the details page. Let's take an example of passing a Todo item from a ListView to a 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.

1. Create a ListView Page

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

2. Create A Details Page

To create a page that shows the Todo item details:
  • First, drag the Column widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree. Set its Cross Axis Alignment to Start.
  • 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.

3. Add The Parameter On The Details Page

To add a parameter:
  • Select the second page.
  • Navigate to right and click on the Define parameter icon
    ​
  • Click on + Add Parameter and enter the parameter name.
  • Set the Type to Record. Setting the Type to Record allows you to accept a single document/record from the previous page.
  • Set the Record Type to the Firestore collection that holds the Todo data.
  • Click Save.

4. Pass The 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 ListView page.
  • Select ListTile from the widget tree or from the canvas area.
  • Click on the Actions tab (on the right side of your screen).
  • Click on + Add Action and select the On Tap option.
  • Find the Action Type dropdown and change it to Navigate.
  • Under the Navigate To, click on the No Page Selected and choose the details page.
  • Click on the Pass button below. Now the parameter (created on the second page) will be displayed. You can also define a new parameter for the second page from here itself by clicking on the Define button.
  • Set the Source to [collection] Record(from ListView).

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 Property editor and click on the Set from Variable.
  • Click on the Source dropdown and set it to the parameter name that holds the data.
  • Set the Available Options to the Field that you want to display.
  • Click Save.

Passing A Record Reference To Another Page

A Record Reference points to the location where the document (actual data) resides. You can use the record reference to retrieve data associated with that record. For example, in the example below you could use the user record reference to retrieve information associated with a user's account (e.g. name, location, etc.).
In Firestore Data Manager, the record reference looks like this:
Sometimes, when you pass data to another page, you may not have all of the data you want to pass. In this case, you could pass a record reference and create a query to pull the required information.
Here's an example of this situation:
  • When a user clicks on the profile photo on the ToDo Details Page, we want to open the UserDetails page that contains additional information on the user (e.g. user name, email).
  • The Todo Details page contains a user photo but does not have the additional information we want to display.
  • Instead, we can pass the record reference of the user, and create a query based on the record to retrieve the additional user information on the User Details page.
Example of using a record reference
Passing a record reference to another page includes the following steps:
If you have already created your pages, you can skip to Step 3.

1. Create The Todo Details Page

You may have a page that shows document data or a list of documents.
To show a list of documents (query collection), find the instructions here.
To show a single document data, follow the instruction here.
A page with Todo information and the user who created it looks like this:

2. Create A User Details Page

To create a user details page:
  • First, drag the Column widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree. Set its Horizontal Alignment to 0.
  • 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 email.

3. Add A Parameter On The User Details Page

To add a parameter:
  • Select the User Details page.
  • Navigate to right and click on the Define parameter icon
    ​
  • Click on + Add Parameter and enter the parameter name.
  • Set the Type to RecordReference. Setting the Type to RecordReference allows you to accept a document reference from the previous page.
  • Set the Record Type to the Firestore collection that holds the Todo data.
  • Click Save.

4. Pass The Record Reference

A record 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 previous page (Todo details).
  • Select Widget from the widget tree or from the canvas area.
  • Click on the Actions tab (on the right side of your screen).
  • Click on + Add Action and select the On Tap option.
  • Find the Action Type dropdown and change it to Navigate.
  • Under the Navigate To, click on the No Page Selected and choose the details page.
  • Click on the Pass button below. Now the parameter (created on the second page) will be displayed. 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 record.
  • Set the Available Options to the Field that holds the record reference.

5. Query A Document Based On Record Reference

Once you have access to the record 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 have access to 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.
  • Set the Source value to a Record Reference (e.g. the name of your parameter that holds a record reference).
  • (Optional) By default, the result of this query will automatically refresh when the document is updated. (e.g. address/phone change) Checkmark the Single Time Query to load the result only once and not refresh when any updates are made.
  • Click Save.

6. Showing Data in UI Elements

To show user's data on user details page:
  • Select the Image Widget from the widget tree or from the canvas area.
  • Move to property editor and scroll down to the path property.
  • Click on the Set from Variable text. (This will open a new panel)
    • Find the Source dropdown, click on unset and select the source. For showing data queried on Page, select the [collection] Record (from [pagename]).
    • Under the Available Options, click on Unset and select the field that holds the image URL path.
    • Click Save.
  • Select the Text Widget from the widget tree or from the canvas area.
  • Move to property editor and scroll down to the Text property.
  • Click on the Set from Variable text. (This will open a new panel)
    • Find the Source dropdown, click on unset and select the source. For showing data queried on Page, select the [collection] Record (from [pagename]).
    • Under the Available Options, click on Unset and select the field that you wish to show.
    • Click Save.
  • Similarly, show the data for other UI elements.
Last modified 8d ago