Deep Linking / Dynamic Links in Flutter using Firebase

Image by: https://innovationm.co/

Deep linking allows you to link to specific content or pages within your app from external sources, such as a web page or another app.

To implement deep linking in a Flutter app using Firebase, you can use the Dynamic Links feature of Firebase. Dynamic Links are smart URLs that allow you to send users to specific content within your app, or to the App Store or Google Play Store if the app is not installed.

Here’s an outline of the steps you can follow to implement deep linking in your Flutter app using Firebase Dynamic Links:

1. Set up Dynamic Links in your Firebase project:

• Go to the Firebase console and select your project.
• In the left-hand menu, go to the “Grow” section and click on “Dynamic Links”.
• Follow the instructions in the Firebase console to set up Dynamic Links for your project.

1. Add the firebase_dynamic_links Flutter plugin for your project:

• In your Flutter project, add the firebase_dynamic_links dependency to your pubspec.yaml file.
• Import the firebase_dynamic_links package in your Flutter code.

dependencies:
  flutter:
    sdk: flutter
  firebase_dynamic_links: ^5.0.11

1. Create a Dynamic Link:

• Use the DynamicLinkParameters class to build a Dynamic Link with the desired link properties.

import 'package:firebase_dynamic_links/firebase_dynamic_links.dart';

Here’s an example of how you can use the DynamicLinkParameters and buildShortLink methods from the firebase_dynamic_links plugin to create a deep link, and the launch method from the url_launcher plugin to open the link in your app:

import 'package:firebase_dynamic_links/firebase_dynamic_links.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Deep Linking Example'),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () async {
              // Create a deep link
              final DynamicLinkParameters parameters = DynamicLinkParameters(
                uriPrefix: 'https://example.com',
                link: Uri.parse('myapp://product/123'),
                androidParameters: AndroidParameters(
                  packageName: 'com.example.myapp',
                ),
                iosParameters: IosParameters(
                  bundleId: 'com.example.myapp',
                ),
              );

              // Build the short link
              final Uri shortLink = await parameters.buildShortLink();

              // Open the link in the app
              if (await canLaunch(shortLink.toString())) {
                await launch(shortLink.toString());
              }
            },
            child: Text('Open Deep Link'),
          ),
        ),
      ),
    );
  }
}

This code creates a deep link to the 'myapp://product/123' URI and builds a short link using the buildShortLink method. It then uses the launch method to open the link in the app.

Note that you will need to configure your app to handle the deep link URI. You can do this by setting up a AndroidManifest.xml file for Android, and a Info.plist file for iOS. You can find more information about this in the documentation for the firebase_dynamic_links plugin.

Now get URL in Main()

For example, you can use the createDynamicLink() method to create a new dynamic link, and the onLink() method to listen for dynamic links that have been clicked by the user.

Here’s an example of how you can use these methods to create and retrieve a dynamic link:

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseConfig.platformOptions);

  // Get any initial links
  final PendingDynamicLinkData? initialLink = await FirebaseDynamicLinks.instance.getInitialLink();

  runApp(MyApp(initialLink));
}

if (initialLink != null) {
  final Uri deepLink = initialLink.link;
  // Example of using the dynamic link to push the user to a different screen
  Navigator.pushNamed(context, deepLink.path);
}

Alternatively, if you wish to identify if an exact Dynamic Link was used to open the application, pass it to the getDynamicLink method instead:

String link = 'https://dynamic-link-domain/ke2Qa';

final PendingDynamicLinkData? initialLink = await FirebaseDynamicLinks.instance.getDynamicLink(Uri.parse(link));

Whilst the application is open, or in the background, you may listen to Dynamic Links events using a stream handler. The FirebaseDynamicLinks.onLink getter returns a Stream containing a PendingDynamicLinkData:

FirebaseDynamicLinks.instance.onLink.listen((dynamicLinkData) {
  Navigator.pushNamed(context, dynamicLinkData.link.path);
}).onError((error) {
  // Handle errors
});

That’s it! Thanks for Reading.