Flutter DeepLink using firebase dynamic links

4 min readJul 27, 2021

My company recently decided to host users to our mobile app using QR code. To be specific, when a user scans a QR code, the user should be landed on a certain page in the mobile app. To implement this, I choose firebase dynamic links to forward users to the specific app. In this article, the guide for implement this requirement will be discussed.

What is a “deep link”?

Before discussing the actual implementation of the “Deep Link”, it is worth having a basic understanding of what deep link is all about. Deep Link is a broad concept, applicable from a web page to an application, designed to direct users to the intended page. In the context of the article, I adopt the “deferred deep link” concept to visualize the behavior or the link.

Compared to traditional deep link, the deferred deep link not only host the user to the app store to download the app but also show a specific page after downloaded it. To trigger this flow, Firebase Dynamic Links offers one link applicable to both platforms, Android and IOS.

Set up

firebase_dynamic_links 2.0.6 | Flutter Package

A Flutter plugin to use the Google Dynamic Links for Firebase API. With Dynamic Links, your users get the best…

pub.dev

You can easily find how to set up whether official package in pub dev or other tutorial videos from Youtube. I will skip the process. In short, you can see in the firebase console, click create new dynamic link and follow instructions from the console dialog.

After creating a link from the firebase console, a setting for IOS is needed to integrate the link to IOS app. Open your Xcode!

In IOS setting the only URL, you put in Xcode is the main URL you create the very first place at the beginning of creating the dynamic link in the firebase console.

Add URL Types

You can add identifier with your bundle identifier(i.e. com.$userName.$appName) and URL Schemes without HTTP/HTTPS (i.e. $appName.page.link)

2. Add capability for the domain

Click +Capability button and add Associated Domains in Xcode.

If you have done, you can see the Associated Domains tap below. Please add domain with ‘applinks:’ (i.e. applinks:$name.page.link)

If you don’t specify functionality “Associated Domains” when you create a provisioning profile, soon you will encounter the error message.

Don’t sweat it, just go to https://developer.apple.com/account/resources/profiles/list

and make a new profile. Then you can change the provisioning profile in the Xcode.

Creat Service for Dynamic Link

Before start, the code is inspired by “Filledstacks”. If you want to see his solution you can find it below the post!

Dynamic Links in Flutter a Complete guide

In this tutorial we will go over dynamic link usage in Flutter. We'll cover what dynamic links are, why you would use…

www.filledstacks.com

Closing…

Firebase Dynamic link is not only perfect for implementing deep link but also offer decent UI for a developer with “Link Preview” function. If you click and see the nicely formatted graph, you can easily understand how the deep link behaves respectively IOS and Android.