Enhance your app with Firebase Dynamic Link + Riverpod + GoRouter (Part 1 — Android)

Deep link is one of the most essential functionalities in mobile apps. But, it seems difficult to developers. In this tutorial, we will build an application that supports Deep linking and easy navigation with GoRouter. As a state management, we will use Riverpod.

Firstly, create a Flutter project. I am skipping this part to keep the article clean. You can get the completed version of the demo application from the following link:

Related-to-Articles/android_deep_linking at master · thisisyusub/Related-to-Articles

We will use Firebase Dynamic Link to create links, so we need to initialize the Firebase project. Go to your Firebase Console and create a new project:

This is our demo project (follow the next steps as you want)

According to documentation, you should add SHA11 key for deep linking. You can use the following link to setup SHA-1 in Firebase. Keep in mind that, for App Links you should add SHA-256 too.

Generate SHA-1 for Flutter/React-Native/Android-Native app

In previous versions, the configuration of Firebase to flutter projects was a bit hard. But for now, we have a Firebase CLI (follow the link to set up firebase CLI). You need to install and set up Node Package Manager, to install CLI. This article does not contain configuration steps of Firebase CLI and NPM to keep the article clean.

After configuring Firebase CLI, you should log in to your account with an application in the console. Run firebase login command, it will give you a link to authenticate, open the link, and select the account of your firebase console, it will automatically redirect to the terminal, and the login process will be completed.

The last step is to check your application id, to create Firebase App with the correct id. Go to android/app/build.gradle and change your application id as you want. Our demo application id is the following:

minSdkVersion should be 19 for Firebase Plugin

Now we can configure the Firebase app with CLI. Just simple run flutterfire configure command in your terminal (in your application folder) and check your project from the list below:

With the Space button, select the platforms on which you want to initialize Firebase Project.

Complete and tap Enter

Press Enter to complete the configuration

And that is it. Your Project is ready.

Lets Write Flutter App

We should add the dependencies that we need. The following dependencies will be used for this demo project (versions can change later):

And initialize your Firebase for your App:

To keep the article simple, we will not implement an API call mechanism. We will use mock data (assume it is fetching from API), so let’s create model and mock data for it:

Create a simple item design for a list of news:

Create a List of News Page:

Create Details Page of News:

Implement the Router mechanism of your app with Go Router as follows:

And at the end, configure your router in MaterialApp:

Awesome! Our application is ready to implement deep linking.

Implementing Deep Link in Android

Firstly, we will create DeepLinkService to get initial link and listen to change until app in foreground:

Note: Keep in mind that, we are using not all link in this example. We just take link.path and will path it to go router to work. Maybe in your example, you can take all link and make something differently.

Then, create a simple notifier to handle state with Riverpod:

We should register our DynamicLinkService and DynamicLinkNotifier with Riverpod to use it in our UI:

Now, we are make a bit change in NewsListPage to receive events and go to the required page:

Dynamic Link Generation and Manifest Configuration

Now, we should create dynamic link in Firebase. But at first, we should register our domain in Firebase Dynamin Links:

it gives some default domains for ous. You can connect your own domain too.

I have choosen default Google-provided domain (androiddeeplinking.page.link). Then create a sample dynamic link in Firebase Dynamic Links Dashboard:

Step 1

And, at the end, if we want to show our application in list that can receive link, we should make a bit change in Manifest.xml:

Here, we have defined that we have a domain (same as Firebase Dynamic Links) to catch deep link. By default, Firebase Dynamic Link opens a Browser. To disable it, we will define it in Mainfest.xml. flutter_deeplinking_enabled should set to false, otherwise it will automatically send firebase link to GoRouter. autoVerify is for App Links in Android, if you set it to false, OS (Operating System) will ask user where you want to open link, otherwise it will work without user selection.

After Android 12, autoVerify will only work if you have generated Google Asset Links JSON file and should deploy to your domain and should set it in Firebase Project Settings.

Testing Deep Link in Emulator

Copy the url from your dynamic link dashboard, we will use it to test our application.

Open a terminal and run the following command while application is not running:

~/Library/Android/sdk/platform-tools/adb shell am start -a android.intent.action.VIEW \ -c android.intent.category.BROWSABLE \ -d 'yourUrl'

Here are two examples. In first one, we close application and try to launch it with deep link command, and in second case we are trying if application is in foreground what will happen.

Thanks for your time! I hope that it will help you!

Helpful Resources:

Flutter Riverpod: How to Register a Listener during App Startup

Understanding deep linking in Flutter with Uni Links - LogRocket Blog

Deep linking

Flutter Apprentice, Chapter 8: Deep Links & Web URLs