Universal link in Flutter

Universal Links in Flutter are a way to make it easy for users to open your app when they click on a link to your website. This can be especially useful for marketing campaigns or for deep linking into specific content within your app. In this blog post, we will cover how to set up and use Universal Links in Flutter.

Before we get started, it’s important to note that Universal Links are only supported on iOS 9.0 and above, so if you need to support older versions of iOS, you’ll need to use a different method such as URL Scheme linking.

For Android

Setup the androidManifest.xml file to handle the deep links

<manifest ...>
  <!-- ... other tags -->
  <application ...>
    <activity ...>
      <!-- ... other tags -->

       <!-- App Links -->
      <intent-filter android:autoVerify="true">
        <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 https://YOUR_HOST -->
        <data
          android:scheme="https"
          android:host="[YOUR_HOST]" />
      </intent-filter>
    </activity>
  </application>
</manifest>

For iOS

Universal Links only work with https scheme and require a specified host, entitlements and a hosted file - apple-app-site-association.

Setting up Universal Links

To use Universal Links in your Flutter app, you’ll need to do a few things:

1. Enable Associated Domains in your app’s entitlements.
2. Set up a unique URL identifier for your app.
3. Set up a JSON file on your website that contains information about your app’s URL identifier.

Enable Associated Domains

Creating the entitlements file in Xcode:

• Open up Xcode by double-clicking on your ios/Runner.xcworkspace file.
• Go to the Project navigator (Cmd+1) and select the Runner root item at the very top.
• Select the Runner target and then the Signing & Capabilities tab.
• Click the + Capability (plus) button to add a new capability.
• Type ‘associated domains` and select the item.
• Double-click the first item in the Domains list and change it from webcredentials:example.com to: applinks: + your host (ex: my-fancy-domain.com).
• A file called Runner.entitlements will be created and added to the project.

i.e. your app link is app.something.com then you will add,

applinks:app.something.com

For Custom URL schemes you need to declare the scheme in ios/Runner/Info.plist (or through Xcode's Target Info editor, under URL Types):

<?xml ...>
<!-- ... other tags -->
<plist>
<dict>
  <!-- ... other tags -->
  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLName</key>
      <string>[ANY_URL_NAME]</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>[YOUR_SCHEME]</string>
      </array>
    </dict>
  </array>
  <!-- ... other tags -->
</dict>
</plist>

Set up a JSON File

In order to use Universal Links, you’ll need to set up a JSON file on your website that contains information about your app’s URL identifier. The JSON file should contain a dictionary with a single key, “applinks,” and an array of dictionaries as the value. Each dictionary in the array should contain the following keys:

• “appID”: The URL identifier for your app.
• “paths”: An array of strings that specify the paths on your website that should open your app.

Here’s an example of what your JSON file might look like:

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

Create a apple-app-site-association file in your website inside .well-known folder in the following way.

https://app.yourdomain.io/.well-known/apple-app-site-association

Handling Universal Links in Flutter

Once you have Universal Links set up for your app and website, you’ll need to handle the links within your Flutter app. To do this, you’ll need to use the uni_links package.

uni_links | Flutter Package

Here’s an example of how you might handle Universal Links in your Flutter app:

To get the initial link,

import 'dart:async';
import 'dart:io';

import 'package:uni_links/uni_links.dart';
import 'package:flutter/services.dart' show PlatformException;

// ...

  Future<void> initUniLinks() async {
   // Uri parsing may fail, so we use a try/catch FormatException.
    try {
      final initialUri = await getInitialUri();
      // Use the uri and warn the user, if it is not correct,
      // but keep in mind it could be `null`.
    } on FormatException {
      // Handle exception by warning the user their action did not succeed
      // return?
    }
    // ... other exception handling like PlatformException
  }

// ...

To listen to any incoming uni link,

import 'dart:async';
import 'dart:io';

import 'package:uni_links/uni_links.dart';

// ...

  StreamSubscription _sub;

  Future<void> initUniLinks() async {
    // ... check initialUri

    // Attach a listener to the stream
    _sub = uriLinkStream.listen((Uri? uri) {
      // Use the uri and warn the user, if it is not correct
    }, onError: (err) {
      // Handle exception by warning the user their action did not succeed
    });

    // NOTE: Don't forget to call _sub.cancel() in dispose()
  }

// ...

If you have come this far,

Congrats you have understood how to implement Universal link in your flutter app.

Thanks for reading this article ❤️

I am open to flutter discussion and any questions.

reach me at LinkedIn !!

other links: https://linktr.ee/tanmoykarmakar

Support me at,

Tanmoy Karmakar is All about flutter 💙💙💙💙