Deep Linking in Flutter (Web + Android + iOS) 📱

Here’s a complete documentation guide for implementing Deep Linking in Flutter with Web, Android, and iOS, including file hosting, platform configuration, and Flutter-side setup using auto_route.

Hosting Required Files 🌐

✅ For Android

• Host the following file on your domain: https://abc.com/.well-known/assetlinks.json
• Generate it using the official Asset Link Generator: Asset Links Generator

Example JSON structure

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.example.app",
      "sha256_cert_fingerprints": ["YOUR_APP_SHA256_FINGERPRINT"]
    }
  }
]

• Add the following in AndroidManifest.xml:

Inside <application> tag:

<meta-data
    android:name="flutter_deeplinking_enabled"
    android:value="true" />

Add intent-filter inside <activity> 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="abc.com" />
</intent-filter>

For iOS 🍏

Create and host apple-app-site-association JSON file

This file uses the JSON format. Don't include the .json file extension when you save this file. Per Apple's documentation, this file should resemble the following content.

https://abc.com/.well-known/apple-app-site-association Open Xcode > Your Project Target > Signing & Capabilities > Add Associated Domains:

/// TODO : 2 image

Example JSON structure:

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "TEAM_ID.bundle.identifier",
        "paths": ["/reset-password/*"]
      }
    ]
  }
}

1. Set one value in the appIDs array to team_id.bundle_id.
2. Set the paths array to ["*"]. The paths array specifies the allowed universal links. Using the asterisk, * redirects every path to the Flutter app. If needed, change the paths array value to a setting more appropriate to your app.
3. Host the file at a URL that resembles the following structure. webdomain/.well-known/apple-app-site-association
4. Verify that your browser can access this file.

• For more Refer to the Flutter documentation 🔗 Set up Universal Links in Flutter

1. In Info.plist, add:

In Info.plist

<key>FlutterDeepLinkingEnabled</key>
<true/>

🚀 Flutter Setup with auto_route

1. Define the Route

If the deep link is like:

 https://abc.com/reset-password/[email protected]

Set it up in your router:

AutoRoute(
  path: '/reset-password/:token',
  page: ResetPasswordRoute.page,
),

2. Use Path & Query Parameters in Your Page

@RoutePage()
class ResetPasswordPage extends StatelessWidget {
  final String? token;
  final String? email;

  const ResetPasswordPage({
    @PathParam('token') this.token,
    @QueryParam('email') this.email,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('Token: $token, Email: $email'),
    );
  }
}

3. Enable Deep Linking in MaterialApp.router

MaterialApp.router(
  routerConfig: getIt<AppRouter>().config(
    includePrefixMatches: true,
    deepLinkBuilder: (deepLink) {
      debugPrint('DeepLink received: ${deepLink.path}');
      return deepLink;
    },
  ),
);

Testing Deep Links 🧪

▶️ Android (using adb from macOS Terminal)

adb shell 'am start -a android.intent.action.VIEW -c android.intent.category.BROWSABLE -d "https://abc.com/reset-password/[email protected]"'