Simplifying App Navigation with Deep Linking in Flutter
Published: 2023-02-26 23:37:13

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](https://docs.flutter.dev/development/ui/navigation/deep-linking)**.

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](https://dev.to/fluttertanzania/how-to-use-gorouter-for-efficient-navigation-in-flutter-1347) 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](https://dev.to/fluttertanzania/how-to-use-gorouter-for-efficient-navigation-in-flutter-1347).

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 <data> 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 ](https://developer.android.com/training/app-links/verify-android-applinks) 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](https://docs.flutter.dev/development/ui/navigation/deep-linking)

 You can find the code of the project in our GitHub repository [here](https://github.com/FlutterTanzania/go-router-demo)