🔗 Deep Linking in Flutter

Deep linking allows users to access specific content within an app directly from a web browser link. This guide covers both native configuration and Flutter implementation using go_router.

Native Configuration

remove setup as it has alredy been done, focus on how to implement it on a page level add tabs here

Android Configuration

1. Update AndroidManifest.xml: Add the following inside the <activity> tag with the ".MainActivity":

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

   In the data configuration, you can change android:host with the URL of your website. This way, when that URL is opened, it will open your application instead of the browser.

iOS Configuration is hidden because its build is not maintained

1. Update Info.plist: Add the following to your Info.plist file:

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

   You can change the CFBundleURLName to your website URL, and for CFBundleURLSchemes, you can change it to the scheme you want. When a user opens a URL with a matching scheme, the system will launch the app associated with that scheme.

Flutter Implementation with go_router

1. Add go_router Dependency

Add the following to your pubspec.yaml:

dependencies:
  go_router: ^6.0.1

Or use this command:

flutter pub add go_router

2. Define Routes

Create a router.dart file to define your app's routes:

import 'package:go_router/go_router.dart';
import 'package:medium_deeplink/home_page.dart';
import 'package:medium_deeplink/news_page.dart';

final GoRouter router = GoRouter(routes: [
  GoRoute(
    path: "/",
    builder: (context, state) => const HomePage(),
  ),
  GoRoute(
    path: "/news/:id/:path",
    name: "news",
    builder: (context, state) => NewsPage(
      userId: state.params["id"].toString(),
      path: state.params["path"].toString(),
    ),
  )
]);

3. Set Up MaterialApp.router

In your main.dart, use MaterialApp.router instead of MaterialApp:

import 'package:flutter/material.dart';
import 'package:medium_deeplink/router.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Deeplink Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routerConfig: router,
    );
  }
}

Testing Deep Links

iOS Testing

Use the xcrun command to test on the iOS Simulator:

xcrun simctl openurl booted "appscheme://dwirandyh.medium.com/news/dwirandyh/deeplink"

Android Testing

Use ADB to test on the Android emulator:

adb shell am start -a android.intent.action.VIEW \
    -c android.intent.category.BROWSABLE \
    -d "http://dwirandyh.medium.com/news/dwirandyh/deeplink" \
    com.example.medium_deeplink

Conclusion

Implementing deep linking in Flutter involves both native configuration and Flutter-side implementation using go_router. By following this guide, you can set up deep linking in your Flutter app, allowing users to access specific content directly from external links. Remember to thoroughly test your implementation on both iOS and Android devices to ensure a smooth user experience.

For more detailed information and the full source code, you can refer to the original article by Dwi Randy Herdinanto.