Flutterexperts

Flutter & Firebase have both Transformed into an Omnipotent Integral part of Developers Community corresponding to their Innate Ability of Never-Ending Scope of Development Covering Multiple platforms like — Android, iOS, Web and Desktop Apps with Incessant Dire focus on Making Performant Apps. While both of them have made their Introducing recently, they have gained Immense Popularity & Acceptance in a flash and are now widely trusted by the largest apps around the globe 🌐.

Firebase Dynamic Links provides a rich feature for handling deep linking for applications and websites. The best part is that Firebase deep linking is free, for any scale. Dynamic Links instead of redirecting the user to the playstore bring-in Optimal User Experience by also navigating him to the Intended Equivalvent content in web/app apparently contributing to building ,improving and growing application for multiple platform domains.

In this article: I will explain how to create and use Dynamic Links in Flutter :

Table of Contents:

:: Flutter — Introduction

:: Firebase — Introduction

:: Firebase Dynamic Links — Introduction, working pattern , advantages

:: Firebase Dynamic Links — Setup Initial Configuration

:: Firebase Dynamic Links — Firebase Console /Flutter Codebase

:: Closing Thoughts

---

Intro to the Topic: Firebase Dynamic Links 🚀

Firebase Dynamic Links — needs, usability, Integration in Flutter codebase, Creating Dynamic Links Through Console, or programming in our apps. Dynamic Links are easily customizable to define their performant activity on the basis of the various platform with the innate ability to track link performance on various platforms, percentage intended action happening, click numbers

Dynamic Links is a smart link that can be differently handled on the basis of platform as per choice that allows you to send existing & potential users to any location within your iOS or Android app by surviving the install process so that even new users see the content they’re looking for when they open the app for the first time.

What is Flutter?

Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time.

/media/eaefff34fddcc032a2b4fe36aa69b8a9Flutter Introduction Video

If you want to explore more about Flutter, please visit Flutter’s official website to get more information.

Flutter is Proudly Entrusted By These Organizations For their Products: — Flutter Showcase

What is Firebase?

Firebase is Google’s mobile platform that helps you quickly develop high-quality apps and grow your business

Firebase is a powerful platform for your mobile and web application. Firebase can power your app’s backend, including data storage, user authentication, static hosting, and more. With Firebase, you can easily build mobile and web apps that scale manifolds.

Let us have a glimpse of Firebase 🔥, and all the tools and services that it provides :

• :: Build Better Apps — Firebase lets you build more powerful, secure and scalable apps with the help of firebase functionalities like Cloud Firestore , ML Kit , Cloud Functions, Hosting , Authentication , Cloud Storage , Real Time Database enhancing the app quality and monitor performance .
• :: Improve app quality — Firebase gives you insights into app performance and stability, so you can channel your resources effectively using functionalities like Crashlytics , Performance Monitoring , Test Labs .
• :: Grow your business — Firebase helps you grow to millions of users, simplifying user engagement and retention using it’s functionalities like In-App Messaging , Google Analytics , A/B Testing , Predictions , Cloud Messaging(FCM) , Remote Configuration , Dynamic Links , App Indexing

As Flutter can be readily used to develop applications for multiple platforms, Firebase products work significantly great by sharing Data and Insights so that they can work profoundly better together.

For more information about Firebase, please visit the official Firebase website.

Firebase Showcase :

Firebase Dynamic Links: Knowabouts

🚀 Turn Desktop Users ⇄ Mobile App Users

Firebase Dynamic Links can Apparently turn out to be a catalyst in Migrating Users from your website to a similar content in the mobile app.

This can be readily done by giving users an effortless way to send themselves a deep link that will open in the right context within your app on your mobile device (even if they need to install the app first). If the app is not installed then on clicking the link the user will be prompted to install the app. Once Installed, the user may be able to access the Link shared.

🚀 Drive more installs with social, email, and SMS Marketing campaigns

Firebase Dynamic Links are employed in Promotional Campaigns that are aimed for users across all platforms. If the link revolves around a Discount offering, when a user installs or opens your app they see the exact content needed, Irrespective of platform & app installed or not.

Firebase Dynamic links can be attached with unique Identifiers that are able to track campaigns on various parameters to help in identification that what campaigns are getting us the high-quality users, & providing users a customized first-time experience based on their campaigns.

Working Pattern: Firebase Dynamic Links

Let us understand the working pattern of Firebase Dynamic Links:-

Dynamic links provide a way for deep links to survive the installation step and in such a way that the user always gets the Intended Context.

If you wish to learn more about Firebase Dynamic Links, you can check out the following video made by firebase :

Firebase Dynamic Links handles the following scenarios :

• :: If the user opens dynamic links , if app isn’t installed in the device then the user is automatically redirected to the playstore/appstore to install your app to access the link.
• :: if the app is installed in the device but not open in the foreground, then opening on link will open up the application on device .
• :: if the app is in the foreground , then the user can get a dynamic link in the registered listener

Setup & Initial Configuration

In order to send Firebase Dynamic Links, We need to create a firebase project for the Firebase Dynamic Links from firebase.google.com by logging in with your Google account. This brings us to the following screen:

click on Add Project Button (+) initiating firebase project creation process.

Select the appropriate name for the project entering continue further

You can either select the firebase analytics and then clicking on Continue Project. Firebase Project is now created and ready to use .

This Progress indicator will show before the dashboard indicating success.

In the project overview page, click the iOS icon to launch the setup workflow as we now needs to register your flutter project for the android and iOS application.

Integration with iOS App

In the project overview page, select the iOS icon to launch the setup flow. If you have already added the app to your project provide click on add app to provide details of your application.

1. Register your app with Firebase :
2. a. Provide with your app’s bundle ID.
   Find this bundle ID from your open project in XCode. Select the top-level app in the project navigator, then access the General tab. The Bundle Identifier value is the iOS bundle ID (for example, com.yourcompany.ios-app-name).
   b. You may also provide optional details like App Nick Name and App Store ID.
   c. Register your app.

Make sure you enter the correct ID As this can’t be edited further at the moment .

Next step, We need to download the config file named GoogleService-info.plist & repeating a similar process to registering your android app there saving the Google-service.json file. Keep those configuration files in ready-to-use with Flutter app later.

• Open Project Settings in the Firebase console and select iOS application.
• Now We need to add the App Store Id of the flutter application which can be located at the app’s URL.
• We can also use makeshift app ID if our app is not published yet which can be replaced later.
• We may need to add the Team ID which can be located at the Apple Member Centre under the provisioning profile.

Open XCode Following the Steps :

• Signing & Capabilities: Turn On the associated domain by adding it to the list which looks like this firebasedynamiclicks.page.link .{URL Schema Created in the firebase console }.

Note: Make sure that your provisioning profile supports the associated domain’s capability.

• Add the Identifier field as Bundle ID and URL Schema as your bundle ID which will look like com.flutterdevs.test.

This can be Confirmed by opening the apple app site association file that will be hosted on the dynamic link’s domain. Like :-

https://firebasedynamiclinks.page.link/apple-app-site-association

If iOS Configuration is properly set up, then you will see a page displaying your app’s App Store ID and bundle ID . Like :-

{"applinks":{"apps":[],
"details":[{"appID":"1234567890.com.example.test","paths":["/*"]}]}}

There is No Additional Configuration Required to Use Dynamic links in an Android app.

Add the Firebase configuration file :

• :. Click Download GoogleService-Info.plist to obtain your Firebase iOS config file (GoogleService-Info.plist).
• Make sure the config file is not appended with additional characters, like (2).
• :. Using XCode, move the file into the Runner/Runner directory of your Flutter app.

Adding Firebase Dynamic Links plugin :

Flutter is availed with Packages providing access to a wide range of services & APIs on each platform.

1. From the root directory of your project, open the pubspec.yaml file and add the following package:

dependencies:
  flutter:
    sdk: flutter
  # Add the dependency for the Firebase Core Flutter SDK
  firebase_dynamic_links: ^0.5.0+11

2. Run flutter packages get.

This will enable your flutter project for adding of Firebase Dynamic Links.

---

Firebase Dynamic Links

:: Setting URL From Firebase Console :

• Open Firebase console. Open Firebase Project in which you need to add Firebase Dynamic Links.
• Configure App : (Android, iOS) in your Firebase project.
• Grow Section will open up the Dynamic Links section
• Now Click on Get Started button for creation of URL prefix
• Create a Dynamic Link Containing Unique Domain Name of your App. For example: firebasedynamiclinks.page.link. Here, the domain name is suffixed with page.link.
• Then, follow: Configure → Verify → Finish steps.

Create a dynamic link in the console

:: Open Firebase Console: Open Up the Project. Click on the New dynamic links button you will be redirected to some step defined for dynamic links creation :

1. Set up your short URL link: add your custom prefix or you can also go with the default prefix provided and then click on go next

https://flutterdevs.page.link/create-first-post.

2. Set up your Dynamic Link : This will contain the valid URL link that will be navigated to up and will be used in our app.

3. Define link behaviour for iOS: Now we need to set define deep link behaviour specific in iOS : Select either from the Opening deep link in browser/ iOS app.

4. Define link behaviour for Android: Now we need to set define deep link behaviour specific in Android: Select either from the Opening deep link in browser/ Android app. Select your current firebase app we may also need to tell firebase what to do if the app is not installed in the device so that it can redirect to the defined google play store link for installation.

5. Campaign tracking, social tags, and advanced options (optional): This is where we can track social tags, campaign tracking for the deep link on various social media parameters.

Now you can create the link. After the link creation, you will see something like :

Create a Dynamic Link In Programming

This is a similar process to the process of dynamic links created in the console.

In the DynamicLinkService create a new function that returns a future called _createDynamicLink . In this function, we will define all the dynamic link parameters and return the Url.toString() .

class DynamicLinksService {
  static Future<String> createDynamicLink(String parameter) async {
    PackageInfo packageInfo = await PackageInfo.fromPlatform();
    print(packageInfo.packageName);
    String uriPrefix = "https://flutterdevs.page.link";

    final DynamicLinkParameters parameters = DynamicLinkParameters(
      uriPrefix: uriPrefix,
      link: Uri.parse('https://example.com/$parameter'),
      androidParameters: AndroidParameters(
        packageName: packageInfo.packageName,
        minimumVersion: 125,
      ),
      iosParameters: IosParameters(
        bundleId: packageInfo.packageName,
        minimumVersion: packageInfo.version,
        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!',
          imageUrl: Uri.parse(
              "https://images.pexels.com/photos/3841338/pexels-photo-3841338.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")),
    );

    // final Uri dynamicUrl = await parameters.buildUrl();
    final ShortDynamicLink shortDynamicLink = await parameters.buildShortLink();
    final Uri shortUrl = shortDynamicLink.shortUrl;
    return shortUrl.toString();
  }

  static void initDynamicLinks() async {
    final PendingDynamicLinkData data = await FirebaseDynamicLinks.instance.getInitialLink();

    _handleDynamicLink(data);

    FirebaseDynamicLinks.instance.onLink(
        onSuccess: (PendingDynamicLinkData dynamicLink) async {
          _handleDynamicLink(dynamicLink);
        }, onError: (OnLinkErrorException e) async {
      print('onLinkError');
      print(e.message);
    });
  }

  static _handleDynamicLink(PendingDynamicLinkData data) async {
    final Uri deepLink = data?.link;

    if (deepLink == null) {
      return;
    }
    if (deepLink.pathSegments.contains('refer')) {
      var title = deepLink.queryParameters['code'];
      if (title != null) {
        print("refercode=$title");


      }
    }
  }
}

Check Out The Source Code :

flutter-devs/Firebase_Dynamic_Links_Demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

Closing Thoughts

We have familiarised ourselves with Firebase Dynamic Links — Integration in apps. They can be embodied as a tool that can play an Influential role in Strengthening Up of Targeted Social Media Campaigns, Redirecting End User to Specific Context within the app, Migrating User to Try-In the App version of your web apps( & vice versa), Customising the Firebase dynamic Link Performance as per various platforms, Complete track of the link performance across various social media platform to Contemplate Future Campaign Strategies.

To find out more about Firebase Dynamic links :

heck out the documentation here and Give them a Try — Deep-link away.

References For the Blog :

Flutter – Beautiful native apps in record time
Flutter is Google’s UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from…flutter.dev

Firebase
Send feedback Join us for Firebase Live , our new weekly web series, on Tuesdays from June 23rd – July 21st, for…firebase.google.com

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

---

🌸🌼🌸 Thank you for reading. 🌸🌼🌸🌼

---

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.