Implementing Deep Linking in Flutter with Uni Links: A Step-by-Step Guide

Deep Linking in Flutter: A Comprehensive Guide

Deep linking is a powerful feature that allows users to access specific parts of an app from a web browser or another app. In this article, we will explore how to implement deep linking in Flutter using the Uni Links plugin.

What are Uni Links?

Uni Links is a Flutter plugin that enables receiving incoming App/Deep Links on Android and universal links and custom URL schemes on iOS. It currently supports Android, iOS, and web platforms.

Setting up Uni Links

To use Uni Links, add the plugin to your pubspec dependencies:

dart
dependencies:
uni_links: ^0.9.0


Next, declare the link’s schema in the Android or iOS configuration file.

Android Configuration

In Android, there are two types of Uni Links: App Links and Deep Links.

• App Links: These links require a specified host, a hosted file (assetlinks.json), and only work with the https scheme.
• Deep Links: These links don’t require a host, a hoster file, or any custom scheme.

Add the following intent filters to your AndroidManifest.xml file:

“`xml

“`

iOS Configuration

In iOS, there are two types of Uni Links: Universal Links and Custom URLs.

• Universal Links: These links only work with the https scheme and require a specified host, entitlements, and a hosted file.
• Custom URLs: These URLs don’t require a host, entitlements, a hosted file, or any custom scheme.

Add the following configurations to your Info.plist file:

“`xml

com.apple.developer.associated-domains

applinks:unilinks.example.com

CFBundleURLTypes


CFBundleTypeRole
Editor
CFBundleURLName
unilinks.example.com
CFBundleURLSchemes

your_scheme



“`

Handling Deep Links

To handle deep links, you need to listen to the incoming links and navigate to the corresponding page. You can use the Uni Links plugin to listen to the incoming links.

Create a new file called deep_link_handler.dart and add the following code:

“`dart
import ‘package:flutter/material.dart’;
import ‘package:unilinks/unilinks.dart’;

class DeepLinkHandler with ChangeNotifier {
String _initialUri;
String _currentUri;

String get initialUri => _initialUri;
String get currentUri => _currentUri;

Future initUniLinks() async {
_initialUri = await getInitialUri();
_currentUri = _initialUri;
notifyListeners();
}

void listenToIncomingLinks() {
uriLinkStream.listen((uri) {
_currentUri = uri;
notifyListeners();
});
}
}
“`

Testing Deep Links

To test deep links, you can use the following commands:

• Android:

  bash
adb shell am start -a android.intent.action.VIEW \
-c android.intent.category.BROWSABLE \
-d "your_scheme://unilinks.example.com"


• iOS:

  bash
xcrun simctl openurl booted "your_scheme://unilinks.example.com"


By following these steps, you can implement deep linking in your Flutter app using the Uni Links plugin.