Simplifying App Navigation with Deep Linking in Flutter

Have you ever shared a link or opened a link that takes directs you to specific page in a specific app?, Well this is what is called Deep link.

Sometimes, opening your app and working through the navigation to get to a screen is just too much trouble for the user. Redirecting to a specific part of your app is more powerful.

So what is deep link?

A deep link is a URL that navigates to a specific destination in your mobile app. Think of deep links like a URL address you enter into a web browser to go to a specific page of a website rather than the home page.

Types of Deep Links

There are three types of deep links:

• URI schemes: An app’s own URI scheme. fluttertanzania://fluttertz.com/home is an example of an app URI scheme. This form of deep link only works if the user has installed your app.

• iOS Universal Links: In the root of your web domain, you place a file that points to a specific app ID to say whether to open your app or to direct the user to the App Store. You must register that specific app ID with Apple to handle links from that domain.

• Android App Links: Like iOS Universal Links for the Android platform, Android App Links take users to a link’s specific content directly in your app. They leverage HTTP URLs and are associated with a website. For users that don’t have your app installed, these links go directly to the content of your website.

Get Started with Deep Links

In this article we will implement Deep Links with the help of go_router for Screen navigation, if your not familiar with go_router package you can read our article here explain about it.

Create a new Flutter project and add the following packages for navigation in pubspec.yaml file

go_router: ^6.1.0

or run the following command in your terminal

flutter pub add go_router

Create a new file for handling navigation in the app with go router name it app_router.dart and add the following code.

final GoRouter router = GoRouter(
  routes: <GoRoute>[
    GoRoute(
        path: "/",
        name: "home",
        builder: (BuildContext context, GoRouterState state) {
          return const HomePage();
        },

        //
        routes: [
          //
          GoRoute(
            path: "sub",
            name: "sub",
            builder: (BuildContext context, GoRouterState state) {
              return const SubHome();
            },
          ),

          //
          GoRoute(
            path: "cats",
            name: "cats",
            builder: (BuildContext context, GoRouterState state) {
              return const CatsPage();
            },
          ),
        ]),
  ],
);

Assuming you have created the required pages for simplicity of the article.

In the above code we have three main routes home for home page, sub for sub-page and another cat extra route.

If you do not understand about go_router please refer our article about it here.

So now we can navigate our user's to this routes.

Setting Up Deep Links

To enable deep linking on iOS and Android, you must add metadata tags on the respective platforms.

You’ll start with iOS.

Setting Up Deep Links on iOS

Open ios/Runner/Info.plist. Add the following code to enable deep link

<key>FlutterDeepLinkingEnabled</key>
<true/>
<key>CFBundleURLTypes</key>
<array>
    <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>fluttertanzania.com</string>
    <key>CFBundleURLSchemes</key>
    <array>
    <string>fluttertanzania</string>
    </array>
    </dict>
</array>

Setting Up Deep Links on Android

Open android/app/src/main/AndroidManifest.xml. Here you’ll also find two new definitions in the tag:

<!-- Deep linking -->
<meta-data android:name="flutter_deeplinking_enabled"
android:value="true" />
<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="fluttertanzania"
  android:host="fluttertanzania.com" />
</intent-filter>

When you create a deep link for FlutterTanzania, the custom URL scheme looks like this:

fluttertanzania://fluttertanzania.com/<path>

Testing Deep Links

Next, you’ll test how deep linking works on iOS and Android

Testing Deep Links on Android

Run your simulator or make sure the app is running in your device.

Enter the following in your terminal to navigate to the sub page in our app.

adb shell 'am start -a android.intent.action.VIEW \
    -c android.intent.category.BROWSABLE \
    -d "fluttertanzania://fluttertanzania.com/sub"' \
    <package name>

Replace the <package name> with the package name of your Android app. If you named the package com.example.go_router, run the following command:

adb shell 'am start -a android.intent.action.VIEW \
    -c android.intent.category.BROWSABLE \
    -d "fluttertanzania://fluttertanzania.com/sub"' \
    com.example.go_router

For more details check Verify Android App Links documentation.

Testing Deep Links on iOS

Start by running your iOS simulator and run the following command in the terminal

xcrun simctl openurl booted fluttertanzania://fluttertanzania.com/sub 

This command will open directly to the sub page in our app.

That's it 😃, Congratulations on learning how to work with deep links in your Flutter app!

Your can find more about deep link's in official flutter documentation here

You can find the code of the project in our GitHub repository here