Home / Flutter / Deep Linking in Flutter: How to Implement and Why You Should Use It
Flutter

Deep Linking in Flutter: How to Implement and Why You Should Use It

Share this post on:

Deep linking is a powerful feature that allows you to link to specific content or pages within your mobile app directly from a web browser, another app, or even an external notification. In Flutter, deep linking can enhance your app’s user experience by providing seamless navigation between app screens and improving accessibility.

In this blog post, we’ll walk through what deep linking is, why you should use it, and provide a step-by-step guide on how to implement it in your Flutter app.

What is Deep Linking?

Deep linking is the practice of using a URL to link to a specific page within an app, rather than just launching the app’s home screen. Deep links are commonly used for:

Sharing content (e.g., linking directly to a specific blog post or product page).

Handling notifications (e.g., opening a specific chat or message when a user clicks a push notification).

Improving user experience by allowing users to return directly to the content they were previously engaging with.

There are three types of deep linking:

  • Traditional Deep Links – These links work if the app is already installed. They look like app://product/1234.
  • Universal Links (iOS) / App Links (Android) – These work both when the app is installed and when it is not. If the app isn’t installed, the link opens in a web browser and prompts the user to install the app.
  • Custom URL Schemes – This method uses a custom protocol to open specific content within the app (e.g., myapp://home).

Why Use Deep Linking in Your Flutter App?

  • Improved User Experience: Deep linking lets users skip straight to the content they care about, rather than navigating through multiple screens.
  • Push Notifications: You can send users notifications that link directly to specific content in your app, providing a personalized experience.
  • Marketing Campaigns: When you’re running campaigns or sharing content on social media, you can use deep links to drive users directly to specific content within your app.
  • App Re-engagement: With deep links, users can easily pick up right where they left off, helping to improve app retention and engagement.

Setting Up Deep Linking in Flutter

implement deep linking in your Flutter app, you need to perform the following steps for both Android and iOS platforms. We will use the uni_links package, which is a simple way to handle deep linking in Flutter.

Step-by-Step Guide to Implement Deep Linking in Flutter

1. Install Dependencies

First, you need to add the app_links package to your pubspec.yaml file. This package allows you to handle both app links and deep links in your Flutter application.

dependencies:
  flutter:
    sdk: flutter

  app_links: ^6.4.0

2. Configure Deep Linking for Android

To enable deep linking in Android, you need to make changes to the Android configuration files.

Step 2.1: Configure the Android Manifest

add an <intent-filter> for the activity that will handle the deep link. This filter will specify the URL patterns that your app can handle.

<activity
    android:name=".MainActivity"
    android:launchMode="singleTask"
    android:theme="@style/LaunchTheme"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize"
    android:label="@string/app_name"
    android:windowSoftInputMode="adjustResize">

    <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:scheme="myapp" android:host="product" />
    </intent-filter>

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

</activity>
  • We handle deep links that start with myapp://product/ and http://www.example.com/product.
  • The scheme represents the custom protocol for the deep link, and the host is the part that follows the scheme.

Step 2.2: Handle Deep Links in Flutter

Now, you need to write the code to handle incoming deep links. You can use the app_links package to listen for incoming links.

import 'dart:async';

import 'package:app_links/app_links.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'url_protocol/api.dart';

const kWindowsScheme = 'sample';

void main() {

  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _navigatorKey = GlobalKey<NavigatorState>();
  StreamSubscription<Uri>? _linkSubscription;

  @override
  void initState() {super.initState();

    initDeepLinks();
  }

  @override
  void dispose() {
    _linkSubscription?.cancel();

    super.dispose();
  }

  Future<void> initDeepLinks() async {
    // Handle links
    _linkSubscription = AppLinks().uriLinkStream.listen((uri) {
      debugPrint('onAppLink: $uri');
      openAppLink(uri);
    });
  }

  void openAppLink(Uri uri) {
    _navigatorKey.currentState?.pushNamed(uri.fragment);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: _navigatorKey,
      initialRoute: "/",
      onGenerateRoute: (RouteSettings settings) {
        Widget routeWidget = defaultScreen();

        // Mimic web routing
        final routeName = settings.name;
        if (routeName != null) {
          if (routeName.startsWith('/book/')) {
            // Navigated to /book/:id
            routeWidget = customScreen(
              routeName.substring(routeName.indexOf('/book/')),
            );
          } else if (routeName == '/book') {
            // Navigated to /book without other parameters
            routeWidget = customScreen("None");
          }
        }

        return MaterialPageRoute(
          builder: (context) => routeWidget,
          settings: settings,
          fullscreenDialog: true,
        );
      },
    );
  }
Widget defaultScreen() {
    return Scaffold(
      appBar: AppBar(title: const Text('Default Screen')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const SelectableText('''
            Launch an intent to get to the second screen.

            On web:
            http://localhost:<port>/#/book/1 for example.

            On windows & macOS, open your browser:
            sample://foo/#/book/hello-deep-linking
            This example code triggers new page from URL fragment.
'''),
            const SizedBox(height: 20),
            buildWindowsUnregisterBtn(),
          ],
        ),
      ),
    );
  }

  Widget customScreen(String bookId) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: Center(child: Text('Opened with parameter: $bookId')),
    );
  }

  Widget buildWindowsUnregisterBtn() {
    if (defaultTargetPlatform == TargetPlatform.windows) {
      return TextButton(
          onPressed: () => unregisterProtocolHandler(kWindowsScheme),
          child: const Text('Remove Windows protocol registration'));
    }

    return const SizedBox.shrink();
  }
}
  • Sets up a listener for deep links using AppLinks().uriLinkStream.
  • When a deep link is received, it prints the URI to the console and calls openAppLink().
  • defaultScreen(): The initial screen of the app, displaying instructions and a button to unregister the Windows protocol.
  • customScreen(): A screen that displays the book ID passed from the deep link.
  • The scheme represents the custom protocol for the deep link, and the host is the part that follows the scheme.

3. Configure Deep Linking for iOS

For iOS, you need to configure your app to handle deep links and set up URL schemes.

Step 3.1: Modify Info.plist

Open ios/Runner/Info.plist and add the following:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
        <array>
        <string>myapp</string>
    </array>
</dict>
</array>
  • This tells iOS that your app can handle URLs starting with the myapp:// scheme.

Step 3.2: Handle Deep Links in Flutter (same as Android)

The same Flutter code from the Android section will work for iOS. The app_links package works seamlessly across both platforms, so the deep link handling code doesn’t change for iOS.

4. Test Deep Linking

To test deep linking, you need to run the app on a physical device or emulator. After launching the app, you can test deep linking by:

  • Android: Using ADB to send an intent with the deep link.

    adb shell am start -W -a android.intent.action.VIEW -d “myapp://product/1234” com.example.deep_linking
  • iOS: Open Safari or any other app and type the deep link URL like myapp://product/1234.

    The app should open directly to the screen that handles the deep link.
    Deep linking is a great way to improve user experience and provide seamless navigation to specific content within your Flutter app.
    By integrating deep links, you can offer features like push notifications, personalized marketing campaigns, and quick access to content, all of which enhance user engagement.
At 200OK Solutions, we specialize in building seamless and efficient mobile applications with Flutter. Our expertise in deep linking ensures smooth navigation, enhanced user engagement, and a frictionless app experience. Whether you need deep linking implementation, mobile app development, or cloud integration, we deliver tailored solutions to drive business success. Discover how we can enhance your Flutter app at 200OK Solutions. 🚀