Mastering Flutter Deep Linking: A Comprehensive Guide

Deep links are revolutionizing the landscape of mobile applications, with flutter deep linking leading the way. Imagine this scenario: a friend shares a link to a product. You click it, and presto! You’re not just inside the app but directly viewing that specific product. Sounds like magic? No, it’s the power of deep linking!

In Flutter, deep links act as direct pathways to precise app content or functionalities, crucial for apps with easily shareable content. They facilitate seamless in-app experiences when users share links, supporting everything from promotional campaigns to content shortcuts. This guide aims to explains flutter deep linking, covering everything from setting up native functionality for Android and iOS to managing navigation with GoRouter.

Deep links not only simplify navigation but also foster user retention, enhance engagement, and streamline content sharing. Whether you’re creating your initial deep link or refining existing ones, this guide serves as the ultimate roadmap to deep linking success.

Composition of a Flutter Deep Linking

A deep link redirects users to a specific destination within an app rather than a webpage.

Deep links comprise a URL, a string of characters, which includes:

Protocol: This marks the beginning of the link, commonly seen as http or https. It specifies the protocol to utilize when accessing the resource online.

Domain: This denotes the domain name of the link. For instance, codewithandrea.com represents the domain, indicating the location of the resource.

Path: This identifies the precise resource within the domain that the user wishes to access. In our instance, /careers/ serves as the path.

Additionally, there are:

Query Parameters: These are supplementary options appended after a ? mark, typically aiding in data sorting or filtering.

Port: This facilitates communication with the server’s network services. While often omitted, HTTP and HTTPS default to ports 80 and 443, respectively.

Fragment: Also known as an anchor, this optional segment follows a # symbol and focuses on a specific part of a webpage.

Here’s an annotated illustration showcasing all the aforementioned elements:

An instance of a complete URL with protocol, domain, port, path, query parameters, and fragment.

Understanding the Structure of a Link Equips You to Manage it Effectively Within Your Flutter App

During the initial stages of your project, you might influence how the URL is constructed to ensure simplicity and ease of handling.

It’s worth noting that while some URLs are well-designed, others may pose challenges when integrated into your app. Stay tuned for the implementation section of this guide to witness how it’s executed in flutter deep linking.

Varieties of Deep Links

Mobile apps can accommodate two types of deep links based on the utilized scheme.

Deep links encompass regular web links. Custom Schemes:

In Android, this is referred to as a deep link, while in the iOS realm, it’s termed a custom URL scheme. This approach proves advantageous if you lack a domain but seek to leverage the potential of deep links.

You have the liberty to select any Custom Scheme, provided you define it within your app. The setup process is swift since uniqueness isn’t a concern.

However, a downside is its diminished security, as any application could hijack your Custom Scheme and endeavor to open your links. Additionally, if a user lacks your app and clicks on a Custom Scheme link, they’ll encounter a dead end accompanied by an error message. While not ideal, its simplicity renders it convenient for rapid tests.

HTTP/HTTPS Scheme

Known as App Links on Android and Universal Links on iOS, this method furnishes the most secure approach to integrating deep link support into your mobile app.

A mobile application must fulfill both domain ownership and authentication requirements. The manifest file on Android must contain the domain name and the associated domains file on iOS must contain the associated domain name.

By engaging in this synchronization, your app acknowledges the domain, and the domain authenticates your app. This bidirectional validation ensures the integrity and legitimacy of the deep links, offering a secure deep-linking experience.

Sufficient with the theory; let’s delve into platform configuration!

Setting Up Deep Links on Android

Let’s commence by adjusting the AndroidManifest.xml file:

Access the android/app/src/main/AndroidManifest.xml file.
Incorporate an intent filter into your activity tag. Specify your scheme and domain.
Optional: delineate supported paths.

The intent filter should resemble this:

If opting for a Custom Scheme and aiming to open links like yourScheme://yourDomain.com, utilize:

The foregoing example doesn’t specify particular paths. With this setup, your app can access all URLs from your domain. This is often undesirable, and for greater control, you must define the accepted paths by integrating relevant path tags. The most prevalent ones include path, pathPattern, and pathPrefix.

You can locate a detailed guide on utilizing various data tags in the official Android documentation.

Android Server Verification

You must ensure your domain recognizes your app as a trustworthy URL handler now that the app recognizes the types of URLs it should handle.

It’s essential to note that this step solely pertains to HTTP/HTTPS links and not custom schemes.

Step 1: Generate a new file named assetlinks.json. This file should encompass the digital asset links associating your site with your app. It should contain the following:

Swap out “com.example” with your app’s package name, and replace the sha256_cert_fingerprints value with your app’s unique SHA256 fingerprint.

Step 2: Your website must contain the assetlinks.json file. It must be accessible via https://yourdomain/.well-known/assetlinks.json. If you’re unsure how to execute this, contact your domain’s administrator.

Step 3: To validate if the assetlinks.json is correctly configured, utilize the statement list tester tool provided by Google.

SHA256 fingerprints can be generated by using this command: grandle signingReport.

Using the Developer Console, you can access your production app’s app signing under Setup > App Integrity > App Signing.

How to Validate Deep Links on Android

Ready to verify your deep links on Android? Simply launch an Android emulator and execute these commands via the terminal.

1. For HTTP/HTTPS links:
2. For Custom Schemes:

Heads up! ADB typically resides in the android/sdk/platform-tools directory. Ensure this directory is in your system path before executing these commands.

Encountering an “adb: more than one device/emulator” obstacle? If you’re concurrently operating multiple Android devices or emulators, peruse this thread for a resolution.

An alternative method to test is by sending the link https://yourDomain.com to yourself using any app (such as WhatsApp) and subsequently clicking on it. Initially, the aim is for the app to activate. We’ll later delve into how to navigate to the appropriate screen with flutter code.

🔸Potential concern🔸

If tapping the URL activates your app “within” the source app (such as Gmail or WhatsApp) rather than independently, append android:launchMode=”singleTask” within your <activity> tag.

The subsequent example depicts the app’s appearance after being activated with a deep link from WhatsApp:

Related read: How to Create Deeplinks for Android Using Branch.io?

Understanding the Disambiguation Dialogue

The disambiguation dialogue is a prompt displayed by Android when a user possesses multiple apps capable of handling a specific link. It enables users to select their preferred application.

To circumvent this, you should make your app the default handler for the link. While this action entails user consent, it streamlines the user experience, ensuring a smoother navigation process.

Before initiating this, consider its repercussions. Once your app becomes the default handler, users must actively revoke this privilege to enable other apps to manage these links.

Custom Scheme Integration

If you’re following the Custom Scheme approach, you don’t need to validate your server’s URLs. Instead, after appending the intent filter to AndroidManifest.xml, the integration process is complete.

Subsequently, your app can handle custom-scheme links without further ado.

Congrats! You’ve laid the foundation for deep link integration within your Android app. You’ve configured the AndroidManifest.xml file to intercept incoming links and direct users to the appropriate screens.

Next up, we’ll explore deep linking on iOS and highlight the contrasts and similarities between the two platforms.

Setting Up Deep Links on iOS

Integration within iOS necessitates a nuanced approach due to divergent terminology and methods.

On iOS, deep links are categorized as either Universal Links (recommended) or custom URL schemes. While custom URL schemes remain prevalent, Apple advocates for Universal Links due to their enhanced security and user experience.

Universal Links

Universal Links closely mimic standard web URLs and operate in conjunction with the website’s domain. They proffer a seamless transition from web to app, thereby enriching the user experience.

Key Benefits:

Enhanced Security: Universal Links leverage standard HTTPS authentication mechanisms, safeguarding against potential security threats.

User Experience: Unlike custom URL schemes, Universal Links eschew abrupt app openings. Instead, they incorporate a redirection step, ensuring a seamless user experience.

Referrer Information: Universal Links preserve referrer information, affording app developers insights into traffic sources.

Before delving into Universal Link integration, ensure the following prerequisites are satisfied:

Apple Developer Account: To access capabilities, create an Apple Developer account if you haven’t already.

App ID Configuration: In the Apple Developer Center, configure your App ID to support Associated Domains. This is pivotal for Universal Link integration.

Apple App Site Association (AASA) File: Craft an AASA file and host it on your domain. This file encompasses JSON data specifying the association between your website and the app.

Domains Validation: In the Xcode project, list your domain under Associated Domains.

Implementation Overview:

To summarize, here’s an outline of the Universal Link integration process:

1. Generate the Apple App Site Association (AASA) file and host it on your domain.
2. Configure your Xcode project settings to recognize Associated Domains.
3. Incorporate the necessary entitlements in your Xcode project.
4. Validate the integration via the Apple App Site Association Validator.

Let’s delve into each step in detail!

Generating the Apple App Site Association (AASA) File:

The AASA file is pivotal for Universal Link integration, establishing the association between your website and your app. It’s a JSON file comprising the following structure.

Here’s an example of an AASA file:

{
"applinks": {
"apps": [],
"details": [
{
"appID": "TeamID.BundleID",
"paths": ["*"]
}
]
}
}

dependencies:
go_router: ^2.1.0