Skip to main content

Flutter Firebase Dynamic Links Examples

Flutter Firebase Dynamic Links Tutorial

In this tutorial, we will explore how to use Firebase Dynamic Links in Flutter. Firebase Dynamic Links is a powerful tool that allows you to create deep links that can route users to specific content within your app, even if the app is not installed on their device.

Prerequisites​

Before we get started, make sure you have the following:

  • Flutter SDK installed on your machine
  • Firebase project set up with Flutter
  • FlutterFire libraries installed and configured in your Flutter project

Installation​

  1. Open your Flutter project in your desired IDE.
  2. Open the pubspec.yaml file and add the following dependencies:
dependencies:
  firebase_dynamic_links: ^2.0.0
  1. Run the following command to fetch the dependencies:
flutter pub get
  1. Import the necessary packages in your Dart file:
import 'package:firebase_dynamic_links/firebase_dynamic_links.dart';

To create a dynamic link, you can utilize the FirebaseDynamicLinks class provided by the firebase_dynamic_links package. Here's an example of how to create a dynamic link:

Future<String> createDynamicLink() async {
  final DynamicLinkParameters parameters = DynamicLinkParameters(
    uriPrefix: 'https://your_domain.page.link',
    link: Uri.parse('https://your_domain.com/some-page'),
    androidParameters: AndroidParameters(
      packageName: 'com.your_domain.your_app',
    ),
    iosParameters: IosParameters(
      bundleId: 'com.your_domain.your_app',
    ),
  );

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

In this example, we specify the uriPrefix which is the domain of the dynamic link, the link which is the URL that the dynamic link will redirect to, and the androidParameters and iosParameters which specify the app package name and bundle ID respectively.

To generate a short dynamic link, we call the buildShortLink() method and retrieve the shortUrl from the ShortDynamicLink object.

To handle dynamic links in your Flutter app, you need to listen for incoming dynamic links. Here's an example of how to handle dynamic links:

void handleDynamicLink() async {
  final PendingDynamicLinkData data = await FirebaseDynamicLinks.instance.getInitialLink();
  final Uri deepLink = data?.link;

  if (deepLink != null) {
    // Handle the deep link here
  }

  FirebaseDynamicLinks.instance.onLink(
    onSuccess: (PendingDynamicLinkData dynamicLink) async {
      final Uri deepLink = dynamicLink?.link;

      if (deepLink != null) {
        // Handle the deep link here
      }
    },
    onError: (OnLinkErrorException e) async {
      // Handle any error that occurs during link handling
    }
  );
}

In this example, we first check if the app was opened with a dynamic link using getInitialLink(). If a deep link is present, we can handle it accordingly.

We also listen for dynamic links using the onLink() method, which provides the PendingDynamicLinkData object containing the deep link. We can also handle any errors that occur during link handling using the onError callback.

You can customize the behavior of dynamic links by specifying additional parameters. Here's an example of how to customize dynamic link behavior:

void customizeDynamicLink() {
  final DynamicLinkParameters parameters = DynamicLinkParameters(
    uriPrefix: 'https://your_domain.page.link',
    link: Uri.parse('https://your_domain.com/some-page'),
    androidParameters: AndroidParameters(
      packageName: 'com.your_domain.your_app',
      minimumVersion: 1,
      fallbackUrl: Uri.parse('https://your_domain.com/fallback-page'),
    ),
    iosParameters: IosParameters(
      bundleId: 'com.your_domain.your_app',
      minimumVersion: '1.0.0',
    ),
    navigationInfoParameters: NavigationInfoParameters(
      forcedRedirectEnabled: true,
    ),
  );

  // Build and handle the dynamic link
}

In this example, we customize the behavior of the dynamic link by specifying the minimumVersion for Android and iOS, the fallbackUrl which is the URL to open if the app is not installed, and the forcedRedirectEnabled parameter to force a redirect to the dynamic link URL.

You can retrieve additional information from a dynamic link, such as the campaign parameters or the analytics parameters. Here's an example of how to retrieve dynamic link information:

void retrieveDynamicLinkInformation() async {
  final PendingDynamicLinkData data = await FirebaseDynamicLinks.instance.getInitialLink();
  final Uri deepLink = data?.link;

  if (deepLink != null) {
    final Uri dynamicLink = await FirebaseDynamicLinks.instance.retrieveDynamicLink(deepLink);
    
    if (dynamicLink != null) {
      final String campaign = dynamicLink.queryParameters['utm_campaign'];
      final String source = dynamicLink.queryParameters['utm_source'];
      
      // Use the campaign and source information
    }
  }
}

In this example, we retrieve the initial link using getInitialLink() and then use retrieveDynamicLink() to retrieve additional information for the deep link. We can access the query parameters using the queryParameters property of the Uri object.

You can easily share dynamic links with other users. Here's an example of how to share dynamic links using the share() method:

void shareDynamicLink() async {
  final String dynamicLink = await createDynamicLink();
  
  Share.share(dynamicLink);
}

In this example, we create a dynamic link using the createDynamicLink() function from Example 1, and then share it using the share() method provided by the share package.

You can generate dynamic links with custom parameters to pass additional information. Here's an example of how to generate dynamic links with parameters:

Future<String> createDynamicLinkWithParameters() async {
  final Uri deepLink = Uri.parse('https://your_domain.com/some-page?param1=value1&param2=value2');
  
  final DynamicLinkParameters parameters = DynamicLinkParameters(
    uriPrefix: 'https://your_domain.page.link',
    link: deepLink,
    androidParameters: AndroidParameters(
      packageName: 'com.your_domain.your_app',
    ),
    iosParameters: IosParameters(
      bundleId: 'com.your_domain.your_app',
    ),
  );

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

In this example, we create a Uri object with custom query parameters and pass it as the link parameter when creating the dynamic link.

In addition to dynamic links, you can also handle Universal Links on iOS. Here's an example of how to handle Universal Links:

void handleUniversalLink() async {
  final PendingDynamicLinkData data = await FirebaseDynamicLinks.instance.getInitialLink();
  final Uri deepLink = data?.link;

  if (deepLink != null) {
    // Handle the deep link here
  }
}

Handling Universal Links is similar to handling dynamic links. You can use the getInitialLink() method to retrieve the initial Universal Link, and then handle it using the deep link.

You can listen for errors that occur during dynamic link handling. Here's an example of how to listen for dynamic link errors:

void listenForDynamicLinkErrors() {
  FirebaseDynamicLinks.instance.onLinkError.listen((OnLinkErrorException e) {
    // Handle the error here
  });
}

In this example, we listen to the onLinkError stream provided by FirebaseDynamicLinks.instance and handle any errors that occur during link handling.

If you need to defer dynamic link handling until the app is fully launched, you can use the getInitialLink() method with a delay. Here's an example of how to defer dynamic link handling:

Future<void> deferDynamicLinkHandling() async {
  await Future.delayed(Duration(seconds: 2));
  
  final PendingDynamicLinkData data = await FirebaseDynamicLinks.instance.getInitialLink();
  final Uri deepLink = data?.link;

  if (deepLink != null) {
    // Handle the deep link here
  }
}

In this example, we use the Future.delayed() function to introduce a delay of 2 seconds before retrieving the initial dynamic link. This gives the app enough time to fully launch before handling the dynamic link.

If you need to clear the dynamic links cache, you can use the clear() method. Here's an example of how to clear the dynamic links cache:

void clearDynamicLinksCache() async {
  await FirebaseDynamicLinks.instance.clear();
}

In this example, we call the clear() method provided by FirebaseDynamicLinks.instance to clear the dynamic links cache.

Conclusion​

In this tutorial, we have learned how to use Firebase Dynamic Links in Flutter. We covered various examples, including creating dynamic links, handling dynamic links, customizing dynamic link behavior, retrieving dynamic link information, sharing dynamic links, generating dynamic links with parameters, handling Universal Links, listening for dynamic link errors, deferring dynamic link handling, and clearing the dynamic links cache. Firebase Dynamic Links is a powerful tool that can greatly enhance the user experience in your Flutter app.