What is Deep Linking?

Deep linking is a powerful feature that allows you to direct users to specific content within your app. Instead of just launching the app's home page, deep linking lets you take users straight to a particular screen or action, enhancing their experience. For example, if a user clicks on a link to a specific product, they’ll land directly on that product page within your app.

Why Use Deep Linking?

• Improved User Experience: Users can navigate quickly to what they want.
• Increased Engagement: Direct links can lead to higher interaction rates with your app.
• Seamless Marketing: Share links that guide users directly to promotional content or special offers.

Important Update: Firebase and Deep Linking

It's essential to note that Firebase will be removing certain deep linking features in the future. To ensure your app continues to work seamlessly with deep links, it's crucial to set it up correctly now.

How to Integrate Deep Linking in Your FlutterFlow App

Step 1: Set Up Your FlutterFlow Project

Before you dive into deep linking, ensure you have your FlutterFlow project set up and running. Familiarize yourself with the FlutterFlow interface, as you’ll be navigating through various settings.

Step 2: Configure Your URL Schema

1. Access Project Settings:

Go to your project settings and find the app details section.

2. Enter Your URL Schema:

• Input your desired URL, like http://example.com.
• In this example, http is the URL schema, and example.com is the hostname. This URL will serve as the gateway to your deep links.

3. Advanced Route Settings:

• Toggle the option to ensure that when users press the back button, they return to the home page instead of exiting the app.

Step 3: Download Your APK

Once you’ve configured your settings, download the latest APK file of your app.

Step 4: Extract Your SHA-256 Key

This step involves retrieving a specific key from your APK file. Use the following command:

keytool -printcert -jarfile path/to/app.apk

Keep this key safe; you’ll need it later for verification.

Step 5: Host Your Website on Firebase

To verify your deep link URL, you need to host a simple website on Firebase. Here’s how to do it:

Prerequisites for Hosting

• Ensure you have enabled the "Web" option in your FlutterFlow panel.
• Install Node.js and npm from the official website.
• Install Firebase CLI to manage your Firebase projects easily.

Deployment Steps

1. Download Project Code: From FlutterFlow, select "Download Code" from the Developer Menu.
2. Log In to Firebase: Open your terminal and run:

firebase login

1. Initialize Firebase: Run the command:

firebase init



Follow the prompts to set up hosting for your project.

1. Build Your Web App: Use this command to create the necessary files:

flutter build web

1. Create the .well-known Directory: Navigate to project/build/web/ and create a directory named .well-known. Inside it, create a file called assetlinks.json. This file verifies your app’s ownership. Use the following template and replace the placeholders with your details:

[



{



"relation": ["delegate_permission/common.handle_all_urls"],



"target": {



"namespace": "android_app",



"package_name": "your.package.name",



"sha256_cert_fingerprints": [



"your_sha256_key"



]



}



}



]



1. Deploy Your Website: Finally, deploy your app by running:

firebase deploy

Once deployed, you’ll receive a link to access your web app.

Step 6: Test Your Deep Links

1. Open Your App: Install your app on your phone and open it once to establish a session.
2. Test the Hosted Link: Open the link you received in your browser using http (not https).

Conclusion

By following this guide, you can easily integrate deep linking into your FlutterFlow app and host your verification website on Firebase. This setup will ensure a smoother user experience and prepare your app for future changes. Dive into the world of deep linking today and make your app more engaging for your users! If you have any questions or need assistance, feel free to explore FlutterFlow and Firebase documentation.

‍