Setup Deep linking in Flutter

Have you ever wondered how amazon, youtube, whatsapp opens when u click a link, don’t worry it is not magic — it is deep linking., and almost every app u see, uses this deep linking, in their apps, whether it is an android app, or windows, deep linking is everywhere and its is making your like easier by directly navigating to that path in your apps, instead of opening a website.

Today u are gonna learn how to use the deep linking in flutter, you only need one dependency and it’s go_router . So lets get started with a concept of how deep linking in flutter works. with a flow diagram.

This diagram clearly explain the flow — if mobile app with available it will open the app.

Benefits:-

Seamless UX — opens the app instead of website.
Increase Traffic — U will have increase traffic as the user gets better exprerience.

Setting up Deep Linking — Client Side

So lets me show step by step how we can implement deep linking in flutter.

on Android—

1. Let’s Open Android Manifest file — `android/app/src/main/AndroidManifest.xml`.

2. Now Add a meta-data and intent filter tag - for handling deep linking in android.

<manifest ... >
    <application ... >
        <activity ... >
          <!-- Paste these lines  -->
          <meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
          <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" />

            <!-- Configure your domain and aware sometimes domain needs www many make mistake -->
            <data android:scheme="https" /> <!-- http or https or myapp-->
            <data android:host="example.com" /> <!-- custom domain - www.domain.com or domain.com -->
          </intent-filter>
        </activity>
    </application>
</manifest>

These configuration are enough to open your links in the android, but wait your links still won’t open on the app. If you go to app info → open by default u can see the link u have added, it is not active yet, you can active it manually and your links will open the app, but you don’t need user to manually active the link, So Android need to verify that u own that domain — discussed in the next section.

Server Configuration —

Now we will configure the server so that android verifies that you own that domain and opens apps instead of website.

for Android —

Create the Digital Asset Link file

https://example.com/.well-known/assetlinks.json

(Ensure Path matches exaclty same as mentioned above)

Now paste this in the file you created — Replace the package name with your app package name, multiple fingerprints can be added in the array.

[
  {
    "relation": [
      "delegate_permission/common.handle_all_urls"
    ],
    "target": {
      "namespace": "android_app",
      "package_name": "com.example.myapp", 
      "sha256_cert_fingerprints": [
        "<Your SHA256 Fingerprints>"
      ]
    }
  }
]

Extract your SHA256, of the app you are running and paste in the list, search the internet for extracting the sha256 are the many ways.

GoRouter Setup —

Now your setup should opens the app, but wait does your app handles the path, the answers is no, but don’t worry i also have a robust solution of that its go_router , most efficient routing library in flutter used in production.

Install it:

flutter pub add go_router

It automatically understand the deep links, so if your app receives: https://example.com/profile/123 it will directly open that page.

Create a Router file — lib/app_router.dart
Below is the example how the router is should setup — feel free to change the content accondingly.

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

final router = GoRouter(
  initialLocation: '/',
  routes: [

    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),

    GoRoute(
      path: '/login',
      builder: (context, state) => const LoginPage(),
    ),

    GoRoute(
      path: '/profile/:id',
      builder: (context, state) {
        final id = state.pathParameters['id'];
        return ProfilePage(userId: id!);
      },
    ),
  ],
);

Here if your weblink is https://example.com/login/ then your app will open to this path. Also same for other path. that the power of go_router .

Use router —
Open your main.dart and change it to this:

import 'package:flutter/material.dart';
import 'app_router.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: router,
      title: 'Deep Linking Demo',
    );
  }
}

Now that it your deeplinking should open the page according to your link — from this point GoRouter takes care of navigation, No extra plugin, no manual parsing.

It it helps you drop a like — also comment if you have any suggestion. always there to listen.