Firebase Dynamic Links With Flutter

There are multiple services provided by firebase, Here we are going to take a look at one of its services which is Firebase Dynamic Links. Dynamic Links are nothing but deep links that can survive during the installation process.

First of all, we’re going to look at deep links. Deep links have the capability to directly navigate to a specific page on our app through links. Suppose, We have one e-commerce app and we want to share any product detail with another user we can create a deep link of that product. But, What if the user to whom we share our link doesn’t have an app installed on their device.

Deep links had some issues. The Same link would not work on android or ios devices, and it can behave differently or didn’t work at all for users who didn’t install an app on their device. So for users who did install an app through a deep link, all the link information was lost during the installation process.

Here, comes the role of Firebase Dynamic Links. Dynamic Links are basically deep links that can work as you want them to do. You can create only a single link that can behave the same way on android, ios as well as on a desktop and it will take forward to an appropriate place on their respective platforms. We can also set behavior for users who haven’t installed our app yet. We can redirect those users to our website or to the play store. Now, the advantage of the dynamic link is that during and after the installation process of our app all the information will survive inside the dynamic link, and we can use them when the user opens the app for the first time.

Now, comes to the point of how to set up dynamic links. We have two ways to set up dynamic links, first of all, we can create dynamic links manually from the firebase console, and the second way we can create them programmatically.

First, we start by setting up dynamic links manually from the firebase console. Let’s begin by navigating to the dynamic link section of the firebase console.

When you click on get started it will ask for a URL prefix. If you have your own custom URL then you can enter it or you can use your <project- name>.page.link in the URL prefix section.

After configuring and verifying your URL prefix you can click on finish to continue with your dynamic link. After that, you can set up your dynamic link by creating a new dynamic link.

Here, we can set up our dynamic link as of our need. After the URL prefix, we can add any path if we want to customize the link to make it professional.

In this step, you can provide a URL, which will receive in your app when the user will click on that dynamic link. You can also provide an optional dynamic link name.

In this step, You can define link behavior for android users. This is the main stage where you can define how your link behaves when users have already an app installed on their device or for users who haven’t installed the app. Here, We have to enter the app name for which we are creating a dynamic link, and if the app is not installed then we can send users to our custom URL like any landing page of our app, or we can navigate users to play store or app store to download our app. If you want to configure any tracking, social tags then you can set it up as your need, otherwise, you can simply click on create, and it will create a dynamic link.

So finally, we have created and set up our first dynamic link manually from the firebase console.

Now, there is not the case where every time You will create dynamic links manually, in those cases you can create dynamic links programmatically.

Here, we have a simple UI in which there are 3 buttons and it will generate a dynamic URL for respective screens, and by using that link we can navigate to a specific page in our app. So let’s start!!

For using the dynamic links in our flutter app we have to install the firebase_dynamic_links package in our app. You can find it here.

By performing the installation steps of firebase_dynamic_links we can begin by firstly creating the dynamic links.

By Following, above code snipper you will be able to generate dynamic links for anything, here you have to just pass the id or any dynamic path which you will be using while retrieving users to your app by dynamic link.

For our example, we can easily pass the id of different pages like 1 for page one, 2 for page two, and so on.

So, our final URL will look like “https://dynamiclinkdemo01.page.link/1” for the first page.

After generating a dynamic link, if you want to share it to other mobile apps like Instagram, Whatsapp, Gmail, and any other apps then you can use the flutter package which is Flutter_Share. You can find the Flutter_Share plugin here.

Now after generating and sharing with other apps, we have to set up how users will come back to our app through a dynamic link.

Now we have to apply this initDynamicLinks() function to the init state of our home screen, so it will check every time that whether this app is open through a dynamic link or not.

First of all, We have to check if Deeplink is null or not, if it isn’t null then we can simply derive the id of our page which we pass into the dynamic link.

Remember, we have passed a dynamic link like “https://dynamiclinkdemo01.page.link/1”. so by substring method we can get page Id and based on different page Ids we can navigate to respective screens on our app.

That’s it!!! It is that simple to work with dynamic links. So, with help of dynamic links, you can try your hands on some cool meme sharing apps, post sharing, and any other document sharing features on your app.