Deep Linking Flutter Example

In this article, we are going to learn how to integrate deep linking in flutter applications with both android and iOS platforms. Deep Link means we can launch mobile application instead of browser on click of link.

Using deep link, we can redirect user to specific page in android or iOS applications. We can also pass custom data through this deep link in mobile applications. So we can manage particular screen using these data. Deep Link is very useful for ecommerce business.

For example, if you have news related mobile application and you send latest news information to your email subscribers. Now your email subscribers can get two options: your news app and browser to open this news link. So you can redirect your users to your news application instead of mobile website using this deep link.

Add below dependency in your pubspec.yaml file

uni_links: ^0.5.1

Make Changes in Android Code for Deep Linking Flutter

There are two types of links in android platform: App Link and Deep Link. App Link has some limitations. You can only integrate https scheme if you use app link. App Link also requires a host and a hosted file assetlinks.json.

Deep Link does not require this host or hosted file. We can also integrate any custom scheme with deep link. To integrate deep link in android platform, Add following lines in your AndroidManifest.xml file inside activity tag.

Using android.intent.action.VIEW intent, Intent filter can be reached from google search. Using DEFAULT Category, we can launch activity(screen) without specifying component name. host attribute is used to specify base url. pathprefix parameter is used to differentiate activities so we can launch particular screen.

<intent-filter>
<action android:name=”android.intent.action.VIEW” />
<category android:name=”android.intent.category.DEFAULT” />
<category android:name=”android.intent.category.BROWSABLE” />
<data
android:host=”flutter.deeplinking.sample”
android:pathPrefix=”/”
android:scheme=”https” />
</intent-filter>

Make Changes in iOS Code to integrate Deep Linking

In iOS also two types of links: Universal Link and Custom URL Scheme (Deep Link). Universal link also has limitations like App Link in android platform. Universal Link requires https scheme, a specified host and a hosted file apple-app-site-association.

Custom URL scheme requires to declare scheme in ios/Runner/Info.plist file like we declare in android manifest file for android platform. To integrate this deep link or custom url scheme in iOS application, add following changes in Info.plist file.

<?xml>
<plist>
<dict>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>flutter.deeplinking.sample</string>
<key>CFBundleURLSchemes</key>
<array>
<string>https</string>
</array>
</dict>
</array>
</dict>
</plist>

Get Initial Link URL for Deep Linking Flutter

Future<String> initialLink() async {
try {
final initialLink = await getInitialLink();
return initialLink;
} on PlatformException catch (exception){
log(exception.message);
}
}

String deepLinkURL = “”;

@override
void initState() {
initialLink().then((value) => this.setState(() {
deepLinkURL = value;
}));
super.initState();
}