Mobile ApplicationSolutionsTechnology

How to Implement Firebase Dynamic Links in Flutter?

Table of contents

Introduction

Using Flutter Firebase Dynamic Links, users get the best experience for the platform they open dynamic links on.

These are the URLs through which we can directly guide the user to any page within Android and iOS applications by a single click.

If a user opens a dynamic link in the browser, they can be redirected to parallel content on your website.

Flutter Firebase Dynamic links work across applications installed on your platform.

See also  eWallet App Development - Complete Digital Payment Solution

If a user opens Firebase Dynamic Links on the Android/iOS platform and doesn’t have your app installed, the user can be redirected to Playstore or AppStore to install it and then, the app starts and the user can access it.

Flutter Firebase Dynamic Links Work

Tech Stack We’re using: 

  • Flutter
  • Firebase

Tools We’re using: 

  • Visual Studio Code
  • Android Studio

Why is it Important?

  • Flutter Firebase Dynamic links can help you to create a journey for users to grow the installation ratio.
  • These can help users to redirect to applications via a single click only.
  • Flutter Firebase Dynamic Links encourage users to create new experience when offers or deals are sent via links.
  • These are used by some famous apps.
Importance of flutter firebase dynamic links
  • Using Flutter Dynamic Links you can send users to specific sections of your application to show them important content.
  • Flutter lets you create  short URLs for dynamic links , it will be useful for Affiliate marketing, as it helps affiliates to promote their business marketing products and services.
  • These links increase conversion for user to user sharing.
  • It can also extend your application retention and conversion rate substantially.

1. Add Plugin to your flutter project.

Inside pubspec.yaml add the following plugin under dependencies and run flutter pub get in the terminal.

dependencies:
firebase_dynamic_links: latest

2. Configure and set up Firebase Project

2.1 .Create new firebase project (https://console.firebase.google.com/)

Enter the Project name and click the “Continue” button.

Start your Project

2.2 After successfully creating a Firebase Project, configure the android app.

Enter package name that can be found in you project/android/app/build.gradle

Add firebase to your android app

2.3 Setup  google-services.json.

After successfully adding google-services.json inside android/app, add Firebase Sdk to build.gradle.

download config file
select dynamic links from console panel

3.2 Add the URL prefix by entering the domain name. 

Here firebase will automatically provide some domains. You can edit the domain as you like and click the “Continue” button.

add prefix URL
Dynamic-Link

4.2 Setup URL prefix. Here firebase will automatically provide some name after the URL.

You can edit that or keep it as it is and click the “Next” button.

setup your short URL link

Then the user will be redirected to the play store. Enter “Dynamic Link name”.

setup your dynamic link

If not, select another option.

define link behaviour for apple

4.5. Android app setup:

Select “Open the deep link in your Android App” and click the Next button.

define link behaviour for android

4.6 If you want to track a campaign with UTM parameters or Add social meta tags set up as per firebase documentation otherwise skip ”Campaign tracking, social tags and advanced options (optional)” and click “Create”.

Implement firebase dynamic links in flutter cta
get dynamiclink

5. Setup AndroidManifest.xml(Optional)

If you want to open app directly without being redirected to the browser, add the following lines of code inside android/app/src/main/AndroidManifest.xml

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- Accepts URIs that begin with YOUR_SCHEME://YOUR_HOST -->
    <data
     android:scheme="https"
     android:host="https://itoneclick.page.link" />
</intent-filter>

To create a dynamic link we have to add title, image and itemId.

See also  A Complete Guide to Make Taxi Booking Apps like Uber

Here I have added “id = itemId” after the link to identify specific items while handling dynamic links. 

Future createDynamicLink(
  BuildContext context,
  String title,
  String image,
  String itemId,
) async {
  bool short = true;
  final DynamicLinkParameters parameters = DynamicLinkParameters(
    //add urlPrefix as per point 3.2
    uriPrefix: 'https://itoneclick.page.link',
    //add link as per point 4.7
    link: Uri.parse('https://itoneclick.page.link/testing/?id=$itemId'),
    androidParameters: AndroidParameters(
      //android/app/build.gradle
      packageName: 'android package name',
      minimumVersion: 0,
    ),
    socialMetaTagParameters:
        SocialMetaTagParameters(title: title, imageUrl: Uri.parse(image)),
    dynamicLinkParametersOptions: DynamicLinkParametersOptions(
      shortDynamicLinkPathLength: ShortDynamicLinkPathLength.short,
    ),
    iosParameters: IosParameters(
      bundleId: 'ios bundleId',
      minimumVersion: '0',
    ),
  );

  Uri url;
  if (short) {
    final ShortDynamicLink shortLink = await parameters.buildShortLink();
    url = shortLink.shortUrl;
  } else {
    url = await parameters.buildUrl();
  }

  return url.toString();
}

To receive a firebase dynamic link call, getInitiaLink(). 

getInitiaLink() will return the URL that opened the app, otherwise, it will return null.

If the dynamic link is not null you can use the navigator inside the following method.

Future<void> initDynamicLinks() async {
  FirebaseDynamicLinks.instance.onLink(
      onSuccess: (PendingDynamicLinkData dynamicLink) async {
    final Uri deepLink = dynamicLink.link;

    if (deepLink != null) {
      //We have added id parameter while creating dynamic link
      //It will help you to find specific item from list and
      String id = deepLink.queryParameters['id'];
      print(id);
    }
  }, onError: (OnLinkErrorException e) async {
    print(e.message);
  });

//To Handle pending dynamic links add following lines
  final PendingDynamicLinkData data =
      await FirebaseDynamicLinks.instance.getInitialLink();
  final Uri deepLink = data?.link;

  if (deepLink != null) {
    String id = deepLink.queryParameters['id'];
    print(id);
  }
}

So, here we end up with successful creation and handle firebase dynamic links using Flutter and Firebase.

Implement firebase dynamic links in flutter cta

Conclusion

At last, Flutter firebase dynamic links are of great importance for Android/iOS users. It can help you to improve the user experience with your application. It can let you use these dynamic links in your applications to read all of their benefits more amazingly.

See also  Integrate Sign-in with Apple ID to Create an Account for a Third-Party App

FAQs:

Dynamic links create a connection to send users to an application directly without redirecting any browser.

Using Flutter, firebase dynamic links are very useful to create a straight path between users and beneficial, productive content of the app.

Firebase dynamic links are free to use. Mobile app developers can deserve all the benefits and features of it without any cost.

Firebase dynamic links create productive, Straight and fascinating social and email campaigns in a more effective way.

Here is the list of advantages:

  • Easy to identify useful content
  • Enhance the user experience
  • Increase app install process
  • Drive conversions

lets start your project

Related Articles