FlutterFlow Docs
Search…
Deep & Dynamic Linking
Adding deep and dynamic linking allows you to share a special type of link that takes the user right inside the specific page of your app. You can also send the custom data with a link to load the page content based on the data.
For example, you could share an interesting social media post with your friends, and they can directly access its content without manually searching the post inside the app. It just works like any website link would work.
The figure below illustrates how it works:
Deep and Dynamic link flow
When you click on the link, first, it checks if the app is installed. If not, the link opens the Playstore or Appstore (based on your device) to install the app. After installing, if the page requires authentication, you'll see a login page. After successful login, you can access the content shared with you.
The best thing to note here is that even if the app has a different flow for accessing the page content (e.g. Home Page -> All Posts -> Single Post), you can bypass the flow and directly open a specific page (e.g. Single Post).
On this page, you'll learn about adding deep links and dynamic links and passing data with the link.

Deep Link

The deep link allows you to create a URL that will open a specific page in your app. For the deep links to work, you must have the app installed on your device.

URL Scheme (structure)

The deep link consists of three parts. It begins with the scheme followed by the host and page name, such as designersapp://designersapp.com/profile.
URL scheme
If the page name is not provided (i.e. designersapp://mydesignersapp.com/)It will open the app's landing page.
URL scheme
Let's build an example of sharing and opening a profile page using the deep link. The example looks like the below:
Sharing and opening a deep link
The steps to add the deep link are as follows:
  1. 1.
    ​Enabling deep link​
  2. 2.
    ​Setting page URL​
  3. 3.
    ​Sharing deep link​
  4. 4.
    ​Testing deep link​
In this step, You will enable the deep link and set the URL scheme. To do that:
  • Navigate to the Settings & Integrations > General > App Details.
  • Find the Deep Linking & Routing section and turn on the Enable Deep Linking.
  • If you want to add deep linking on multiple pages and all of them requires users to log in, turn on the Pages Requires Authentication by Default.
  • Find the URL scheme fields and enter the scheme name (before ://) and hostname (after ://).
Enabling deep link

2. Setting page URL

The page URL points to the specific page in your app, which is used on the Web and for deep linking on mobile.
To set the page URL:
  • Select the page that you would like to open via a deep link.
  • Move the properties panel on the right and open the Route Settings section.
  • By default, the Route is the current page name. Edit this if you want a different name in the page URL.
  • By default, the page does not require authentication when it opens via the deep link. However, checkmark the Requires Authentication if your app works only after login.
Setting page URL
You can share the deep link of the current page by adding the share action.
To share the deep link of the current page:
  • Select the page that you would like to open via a deep link.
  • From that page, select any widget (e.g. share button) from the widget tree or the canvas area.
  • Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
    • Click on the + Add Action.
    • On the right side, search and select the Share action.
    • Set the Value Source to From Variable.
    • Set the Source to Global Properties.
    • Set the Available Options to Link To Current Page.
    • Click Close.
Sharing deep link
Deep links can not be tested in Run Mode. Instead, you will need to test the deep links on a real device/emulator.
Before you test the deep link, you need to get it first. The easiest way to get it is to run the app on a device/emulator, click on the share button and then copy the deep link.
Now, you can test the deep link in two ways:
  1. 1.
    Using CLI tools
  2. 2.
    Using Firefox mobile browser
4.1 Using CLI tools
If you have Android Studio with the SDK platform tools installed, you can run the following command in the terminal and replace it with your deep link.
1
adb shell am start -a android.intent.action.VIEW \
2
-c android.intent.category.BROWSABLE \
3
-d "designersapp://designersapp.com/profile"
Copied!
4.2 Using Firefox mobile browser
You can also test the deep link in a Firefox mobile browser. To do so, open the browser, paste the URL in the search bar, open the options menu and click on the Open in app.
Here is how you do it:
Using Firefox mobile browser to open the deep link

Dynamic Link

The dynamic link opens a specific page in your app. Unlike the deep link, the dynamic link survives the app install. That means if the user has not installed the app, they can be taken to the respective store to install the app. After the app is installed, users can be taken straight to the intended app page.
For the dynamic link to work, you need to enable the deep link. You can think of a dynamic link as the additional benefit of the deep link.
FlutterFlow uses Firebase Dynamic Link (a product from Firebase) to create dynamic links.
Let's build an example of sharing and opening a profile page using the dynamic link. The example looks like the below:
Dynamic link example
The steps to add the dynamic link are as follows:
  1. 1.
  2. 2.
    ​iOS setup​
  3. 3.
  4. 4.
    ​Setting page URL​
  5. 5.
  6. 6.

1. Setting up a domain

The dynamic link requires a domain name that will be used as the URL prefix in the link.
To set up the domain name, follow the steps below:
  • Open the Firebase console, and click on Dynamic Link (in the left side menu).
  • Click on the Get Started button. This will open a popup.
  • Enter the domain name. If you don't own a domain, you can select the free Google Provided Domain that ends with a page.link. To set up your own domain, follow the guide here.
  • If you chose Google Provided Domain, you could Finish the setup.
Setting up a domain for the dynamic link

2. iOS setup

You must complete additional configuration for the dynamic link to work on the iOS devices.
Setting up iOS includes:
  1. 1.
    Adding App Store and Team ID to the Firebase project
  2. 2.
    Adding Associated Domain capability to App Store
2.1 Add App Store and Team ID to the Firebase project
To add the App Store and Team ID to the Firebase project:
  • Open the Firebase console, and click on Project Overview (in the left side menu).
  • Select the iOS project and click on the Settings (gear) icon inside.
  • Scroll down to see your selected iOS project.
  • Find the App Store ID field, click on the edit icon (pencil icon), enter the ID, and click Save. To know where is your App Store ID, click on the question mark icon beside the label.
  • Similarly, find the Team ID field, click on the edit icon (pencil icon), enter the ID, and click Save. To know where is your Team ID, click on the question mark icon beside the label.
Adding App Store and Team ID to the Firebase project

2.2 Adding Associated Domain capability to App Store

To add the Associated Domain capability on App Store:
  • Open the Apple Developer homepage and select Certificates, IDs & Profiles.
  • Select Identifiers (far left menu) and then click on your app identifier.
  • Checkmark the Associated Domains.
  • Click Save.
Adding Associated Domain capability to App Store
In this step, you will enable the deep and dynamic link and set the URL scheme.
  • Navigate to the Settings & Integrations > General > App Details.
  • Find the Deep Linking & Routing section and turn on the Enable Deep Linking.
  • If you want to add dynamic linking on multiple pages requiring users to log in, turn on the Pages Requires Authentication by Default.
  • Also, turn on the Use Firebase Dynamic Links.
  • Find the URL scheme fields and enter the domain name created in step 1. Ensure you enter the HTTPS (before ://) and the rest of the part (after ://).
Enabling dynamic link

4. Setting page URL

The page URL points to the specific page in your app, which is used on the Web and for deep linking on mobile.
To set the page URL:
  • Select the page that you would like to open via a dynamic link.
  • Move the properties panel on the right and open the Route Settings section.
  • By default, the Route is the current page name. Edit this if you want a different name in the page URL.
  • By default, the page does not require authentication when it opens via the dynamic link. However, checkmark the Requires Authentication if your app works only after login.
Setting page URL
You can share the dynamic link of the current page by adding the Generate Current Page Link action and then sharing it using the share action.
To share the dynamic link of the page:
  • Select the page that you would like to open via a deep link.
  • Select any widget (e.g. share button) from the widget tree or the canvas area.
  • First, add the action to Generate Current Page Link.
  • Now chain the next action to share the dynamic link.
  • To do that, click on the + button at the bottom of the box and select Add Action.
  • On the right side, search and select the Share action.
  • Set the Value Source to From Variable.
  • Set the Source to Widget State.
  • Set the Available Options to the Current Page Link.
  • Click Close.
Sharing dynamic link
Dynamic links can not be tested in Run Mode. Instead, you will need to test the links on a real device/emulator.
Before you test the dynamic link, you need to get it first. The easiest way is to run the app on a device/emulator. Click on the share button and then copy the dynamic link.
Now you can test the link in a Firefox mobile browser. To do so, open the browser and paste the URL into the search bar.
Here is how you do it:
Testing dynamic link

Passing data with a link

In most cases, you might want to pass custom data with a link. For example, you send the product page link with a discount code and share the profile page with its profile ID. Passing custom data with the link can be used to retrieve the information required to display on the page.
Passing profile id in the link
To pass custom data with the link, you need to have the following:
  • Make sure you have a parameter defined on a page you want to pass in a dynamic link. Learn here how to add parameters.
Adding parameter on page
  • In the Route Settings, include a parameter as part of the route by prefixing it with a colon (:) for example, profilePage/:profileId.
Including a parameter in the route
That's all you need to pass custom data with the deep or dynamic link.