Dynamic links: A complete guide to use them in Flutter App

Flutter app development is indeed one of the most prominent fields in the mobile app development industry. If you’ve implemented this or tried to implement it you know how difficult it is to keep track of something as simple as clicking a promo link. So, once the user has downloaded the app you need to figure out how to see which link they clicked to perform appropriate action in the app. That’s when dynamic links come to action.

Dynamic links - a complete usage tutorial in Flutter apps
Dynamic links – a complete usage tutorial in Flutter apps

With Dynamic Links, your users get the best available experience for the platform they open your link on. If a user opens a dynamic link on iOS or Android, they can be taken directly to the linked content in your native app. If a user opens the same dynamic link in a desktop browser, it can be taken to the equivalent content on your website. So now, we would like to introduce to you guys the guide on how to use them in your Flutter app.

First things first, let’s go through some definition.

Dynamic links are services provided by firebase that takes care of all of that for you. You can create your links in the console or programmatically and share them with other users. They allow you to define the action to take per platform and tailor the experience exactly how you want it to be. It also automatically tracks how many people clicked the link, the platform they were on, and if they completed the intended action. 

Dynamic links definition
Dynamic links definition

In short, these links are like smart links. They handled differently on each platform but you can choose how it’s handled.

In this tutorial we will cover the following things:

Navigate to the Firebase Console, open up your project. In the left navigation bar scroll down to the complete bottom and click on Dynamic links. Click on get started and press next with the default values. You will be given a default prefix or you can enter your own based on your project name. Click on the “New Dynamic Link” button. You will be shown with these steps:

  • Supply your short URL
  • Supply your dynamic link URL
  • iOS behavior
  • Android behavior
  • Campaign tracking

Create the link. When it’s completed you should see something like below when you go to hover over the URL link. That is the link that will be used when sharing the link anywhere. On the right side, there are three dots that you can press for additional options. You can view the details and edit them, we’ll check out the link preview later.

Let’s move onto the actual implementation. To implement dynamic links in Flutter we’ll make use of the firebase_dynamic_links package. Open your pubspec.yaml file and add it as a dependency.

firebase_dynamic_links: ^0.5.0+11

Under the services, folder creates a new file called dynamic_link_service.dart. We’ll create a Future called handleDynamicLinks. This is where we’ll check if there’s an initialLink that the app has been opened with and handle it and we’ll register the onLink function with a success and error callback function. These functions will only be fired if the app is opened from the background or suspended state using the Deeplink. 

Now we can add the functionality to the _handleDeepLink function to perform the actions we want to in the app. We want the app to navigate to the CreatePostView and fill in the title we added into the link. To do that we’ll have to get the NavigationService from the locator and then do some basic url string checks. Then, establish a convention and allow the dynamic links to navigate to any of your views in the app without you having the change the code. 

If you pass a route query parameter you can do something like below.

 void _handleDeepLink(PendingDynamicLinkData data) {
  final Uri deepLink = data?.link;
  if (deepLink != null) {
    print('_handleDeepLink | deeplink: $deepLink');

    var navigationRoute = deepLink.queryParameters['route'];

    var params = deepLink.queryParameters['params'];
    if (params != null) {
      _navigationService.navigateTo(navigationRoute, arguments: params);
    }
  }
}

This is also quite a straight forward task. Remember those 5 things you had to when creating a dynamic link in the console, you do that but in code. In the DynamicLinkService create a new function that returns a future called createFirstPostLink that takes in a String title to share. In this function, we will define all the dynamic links and return the Uri.toString() as the result to the caller. 

 Future<String> createFirstPostLink(String title) async {
    final DynamicLinkParameters parameters = DynamicLinkParameters(
      uriPrefix: 'https://filledstacks.page.link',
      link: Uri.parse('https://www.compound.com/post?title=$title'),
      androidParameters: AndroidParameters(
        packageName: 'com.filledstacks.compound',
      ),
      // NOT ALL ARE REQUIRED ===== HERE AS AN EXAMPLE =====
      iosParameters: IosParameters(
        bundleId: 'com.example.ios',
        minimumVersion: '1.0.1',
        appStoreId: '123456789',
      ),
      googleAnalyticsParameters: GoogleAnalyticsParameters(
        campaign: 'example-promo',
        medium: 'social',
        source: 'orkut',
      ),
      itunesConnectAnalyticsParameters: ItunesConnectAnalyticsParameters(
        providerToken: '123456',
        campaignToken: 'example-promo',
      ),
      socialMetaTagParameters: SocialMetaTagParameters(
        title: 'Example of a Dynamic Link',
        description: 'This link works whether app is installed or not!',
      ),
    );

    final Uri dynamicUrl = await parameters.buildUrl();

    return dynamicUrl.toString();
}

That’s about it. When you want to add a feature where you can share it with a friend for them to make a first post you can add UI to type a title and then share the link with them with a title that you put in for the post.

If you’re having trouble figuring out what your dynamic links will be done in certain scenarios you can open up the firebase console, go to the link. On the far right side, there are 3 dots where you can get a context menu and click on “Link Preview Debug”. This will show you a visual of how your link will behave per platform like below.

Final words

That should be it! Here is the complete guide on how to use dynamic links in the Flutter app. All in all, you should use the deep link technique you can get to anywhere in your app with the correct parameters and provide the user with the best experience possible when they click your links. That, as a result, will help a lot in using your Flutter app, and boost your retention for your application business.

Tags

Share