How To Implement Universal Linking In Flutter App?

Universal Linking is an advanced feature that allows you to direct users to specific content within your app using a standard web URL. This feature enhances user experience by seamlessly bridging the gap between the web and mobile platforms, ensuring that users are guided directly to the relevant content within your app, regardless of whether they are interacting with a website or a mobile app. In this blog post, we will delve into the step-by-step process of implementing universal linking in a Flutter app, covering everything from the basics to more complex configurations, ensuring a smooth and functional integration.

Understanding Universal Linking:

Before we dive into the technical aspects of implementing universal linking, it is crucial to understand what universal linking is and why it is essential for modern app development.

What Are Universal Links?

Universal links are a form of deep linking technology that allows a single URL to open specific content within an app or on a website, depending on the user’s device and whether the app is installed. Unlike traditional deep links, which may open a browser even when the app is installed, universal links provide a more consistent and reliable experience.

Key Features Of Universal Links:

• Single URL: One URL can be used for both the website and the app, ensuring consistency and ease of use.
• Security: Universal links are HTTPS-based, offering enhanced security by preventing unauthorized interception or spoofing.
• App And Web Compatibility: If the app is installed, the link will open in the app. If not, the link will open in the web browser.

Why Universal Links Are Important For Your Flutter App:

Implementing universal links in your Flutter app brings several advantages, such as:

• Improved User Experience: Universal links enable users to open specific content directly within the app, creating a seamless transition between the web and mobile environments.
• Increased Engagement: By guiding users to relevant in-app content, universal links can boost user engagement and retention.
• Cross-Platform Consistency: With universal links, the same URL can be used across iOS, Android, and web platforms, ensuring a consistent user experience.

Setting Up Your Flutter Project:

To implement universal linking in your Flutter app, you first need to set up your Flutter development environment and create a new project. Here’s how to get started.

Installing Flutter And Required Tools:

If you haven’t already installed Flutter, follow these steps to set up your Flutter environment:

1. Install Flutter SDK: Download the Flutter SDK from the official Flutter website based on your operating system.
2. Install Xcode (For iOS Development): If you’re developing for iOS, you need to install Xcode from the Mac App Store.
3. Install Android Studio (For Android Development): Download and install Android Studio, which provides the necessary tools for Android development.
4. Set Up Flutter Environment: Open your terminal and run the following command to add Flutter to your PATH:

   export PATH="$PATH:`pwd`/flutter/bin"

5. Create A New Flutter Project: Run the following command in your terminal to create a new Flutter project:

   flutter create my_universal_links_app cd my_universal_links_app

6. Install The app_links Plugin: Open the pubspec.yaml file in your project and add the app_links plugin to handle universal links:

   dependencies: flutter: sdk: flutter app_links: ^3.4.5

7. Run Flutter Pub Get: Save the file and run the following command to install the new dependencies:

   flutter pub get

Your Flutter project is now set up, and you’re ready to start implementing universal links.

Configuring Universal Links For iOS:

iOS requires specific configurations for universal links to work correctly. This involves setting up Associated Domains and creating an apple-app-site-association file.

Enabling Associated Domains In Xcode:

Associated Domains is a capability in Xcode that allows your app to be associated with specific domains, enabling universal links.

Steps To Enable Associated Domains:

1. Open Xcode: Navigate to the iOS/ directory of your Flutter project and open the .xcworkspace file in Xcode.
2. Select Your Project Target: In Xcode, click on your project in the Project Navigator, then select your app’s target.
3. Add Associated Domains Capability: Go to the “Signing & Capabilities” tab, click the “+” button, and add “Associated Domains.”
4. Add Your Domain: Under the Associated Domains section, add the following entry:

   applinks:yourdomain.com

Replace yourdomain.com with your actual domain name.

Creating The apple-app-site-association File:

The apple-app-site-association file is a JSON file that must be hosted on your domain. It tells iOS which URLs should be handled as universal links.

Steps To Create The apple-app-site-association File:

1. Create The File: On your server, create a file named apple-app-site-association in the root directory. The file should not have any file extension.
2. Add JSON Content: Add the following JSON structure to the file:

   { "applinks": { "apps": [], "details": [ { "appID": "TEAMID.com.yourcompany.yourapp", "paths": [ "/path/to/content/*" ] } ] } }

   • TEAMID: Replace this with your Apple Developer Team ID.
   • appID: This is your app’s bundle identifier (e.g., com.yourcompany.yourapp).
   • paths: Specify the paths that should open in your app.
3. Host The File On Your Domain: Upload this file to the root of your website via HTTPS.

With the apple-app-site-association file in place, iOS will be configured to handle universal links for your app.

Configuring Universal Links For Android:

On Android, universal linking is implemented using App Links and a Digital Asset Links file (assetlinks.json).

Setting Up App Links In Android:

To configure universal links on Android, you need to modify your app’s manifest file and create an assetlinks.json file.

Steps To Configure App Links:

1. Modify AndroidManifest.xml: Open the AndroidManifest.xml file located in the android/app/src/main/ directory. Add the following intent filters inside the <activity> tag of your main activity:

   <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" /> <data android:scheme="https" android:host="yourdomain.com" android:pathPrefix="/path/to/content" /> </intent-filter>

Replace yourdomain.com with your domain and /path/to/content with the specific path you want to handle.

Creating The assetlinks.json File:

Android uses the assetlinks.json file to verify the association between your domain and the app.

Steps To Create The assetlinks.json File:

1. Create The File: On your server, create a file named assetlinks.json and place it in the .well-known/ directory of your website.
2. Add JSON Content: Populate the file with the following content:

   [ { "relation": ["delegate_permission/common.handle_all_urls"], "target": { "namespace": "android_app", "package_name": "com.yourcompany.yourapp", "sha256_cert_fingerprints": [ "YOUR_APP_SHA256_CERT_FINGERPRINT" ] } } ]

   • package_name: Your app’s package name (e.g., com.yourcompany.yourapp).
   • sha256_cert_fingerprints: The SHA-256 certificate fingerprint of your app’s signing key.
3. Host The File On Your Server: Upload the assetlinks.json file to the .well-known/ directory of your website.

Once these configurations are complete, Android will be set up to handle universal links for your Flutter app.

Handling Universal Links In Flutter:

After configuring both iOS and Android platforms, the next step is to handle these links within your Flutter app. This is where the app_links plugin comes into play.

Initializing The app_links Plugin

The app_links plugin simplifies the process of handling incoming universal links in your Flutter app.

Steps To Initialize app_links:

1. Import The Package: In your main.dart file, import the app_links package:

   import 'package:app_links/app_links.dart';

2. Set Up The AppLinks Instance: Initialize the AppLinks instance in your app’s main widget, typically within the initState method of your main app state:

   class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { AppLinks _appLinks; @override void initState() { super.initState(); _appLinks = AppLinks(); _initDeepLinkListener(); } void _initDeepLinkListener() async { _appLinks.getInitialAppLink().then((uri) { if (uri != null) { _handleIncomingLink(uri); } }); _appLinks.uriLinkStream.listen((uri) { if (uri != null) { _handleIncomingLink(uri); } }); } void _handleIncomingLink(Uri uri) { // Handle the incoming universal link print('Incoming link: ${uri.toString()}'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Universal Links Example')), body: Center(child: Text('Handle Universal Links')), ), ); } }

3. Handle Incoming Links: The _handleIncomingLink method processes the incoming universal link and performs the necessary actions, such as navigating to a specific screen in your app.

This setup ensures that your Flutter app can handle universal links effectively.

Testing Universal Links:

Testing is a crucial step to ensure that universal links function as expected on both iOS and Android platforms.

Testing On iOS:

To test universal links on iOS:

1. Install The App: Install your app on a real iOS device, as universal links do not work in the iOS simulator.
2. Use Safari: Open Safari on your iOS device and enter the universal link in the address bar.
3. Check App Behavior: Ensure that the app opens directly and navigates to the expected content.

Testing On Android:

For testing on Android:

1. Install The App: Install the app on a physical Android device.
2. Open The Link: Use Chrome or any other browser on your device to open the universal link.
3. Verify The Result: Confirm that the app opens and displays the correct content.

If the app is not installed, the link should open in the device’s default web browser.

Best Practices For Universal Linking:

To maximize the effectiveness of universal links in your Flutter app, consider the following best practices:

• Keep URLs Simple: Use clean, descriptive URLs that are easy to remember and share.
• Ensure HTTPS: Universal links require HTTPS, so ensure that your website and links are served over a secure connection.
• Test Across Devices: Thoroughly test your universal links on multiple devices and platforms to ensure consistency.
• Handle Edge Cases: Implement logic to handle scenarios where the app is not installed or where the link does not correspond to a specific in-app action.

Conclusion:

Implementing universal linking in your Flutter app can significantly enhance the user experience by providing seamless navigation between web and mobile environments. With proper configuration on both iOS and Android and by leveraging the app_links plugin, you can ensure that your app is ready to handle universal links effectively. This comprehensive guide should serve as a solid foundation for integrating universal links into your Flutter app, allowing you to build more engaging and accessible applications.

Remember, as with any feature, thorough testing is essential to ensure that everything works as expected across different devices and scenarios. By following these steps and best practices, you can create a more cohesive and user-friendly experience for your app users.