Implementing Deep Linking and Universal Links in Flutter Apps

Introduction

Deep linking and universal links let you route external URLs directly into specific screens within your Flutter app. With deep links on Android and universal links on iOS, users can tap a URL and land on relevant content, improving engagement and retention. This tutorial walks through platform setup, plugin selection, code snippets, and testing strategies for a seamless link-handling experience in Flutter.

Configuring Deep Linking on Android

On Android, deep links are defined using intent-filters in your module’s AndroidManifest.xml. You must declare the URI scheme or HTTP host path your app will handle, and configure Digital Asset Links for verified links.

In android/app/src/main/AndroidManifest.xml, add under your tag:

<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" />
  <data android:scheme="https"
        android:host="example.com"
        android:pathPrefix="/product" />
</intent-filter>

Next, host a JSON Digital Asset Links file at https://example.com/.well-known/assetlinks.json linking your SHA256 fingerprint and package name. This ensures Android verifies your domain before launching the app.

Configuring Universal Links on iOS

iOS universal links require enabling Associated Domains in Xcode and hosting an apple-app-site-association file on your HTTPS domain.

1. In Xcode, select your Runner target > Signing & Capabilities > + Capability > Associated Domains.

2. Add an entry: applinks:example.com.

On your web server, create a file at https://example.com/apple-app-site-association with content:

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "TEAMID.com.example.app",
        "paths": ["/product/*"]
      }
    ]
  }
}

Ensure the file is served without extension and with correct MIME type (application/json).

Selecting a Flutter Deep Linking Plugin

The uni_links package provides a unified API for Android and iOS link handling. Add to pubspec.yaml:

dependencies:
  uni_links

Run flutter pub get. uni_links offers getInitialUri() for cold starts and a linkStream for push-based events when the app is already running.

Handling Incoming Links in Flutter

In your main widget or a dedicated service, listen for incoming URIs and navigate accordingly. Example using uni_links:

import 'package:uni_links/uni_links.dart';

void initDeepLinkHandler() {
  // Handle app launch via link
  getInitialUri().then((uri) => _handleUri(uri));

  // Handle link while app is running
  linkStream.listen((uri) => _handleUri(uri));
}

void _handleUri(Uri? uri) {
  if (uri?.pathSegments.first == 'product') {
    final id = uri?.queryParameters['id'];
    navigatorKey.currentState?.pushNamed('/product', arguments: id);
  }
}

Call initDeepLinkHandler() early, for example in main() after WidgetsFlutterBinding.ensureInitialized().

Testing and Debugging

• Android: Use adb shell am start -a android.intent.action.VIEW -d "https://example.com/product?id=42" com.example.app to simulate a deep link.

• iOS Simulator: Open Safari, type your URL, and hit Go. Observe console logs in Xcode.

• Check logcat (Android) or Xcode logs (iOS) for errors in intent-filter matching or association file validation.

• Verify assetlinks.json and apple-app-site-association are accessible without redirects.

Rigorous testing across cold starts, background states, and hot reload ensures reliable link handling in production.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

By configuring intent-filters on Android, setting up Associated Domains on iOS, and leveraging the uni_links plugin, you can implement robust deep linking and universal link support in your Flutter apps. Proper testing and asset association guarantee smooth navigation from external URLs into your app’s content, boosting user engagement and retaining context.