Bowlerplate | Build what matters

Learn how deep links are implemented and how to configure them for your application.

Deep linking allows your app to be opened from a URL, navigating the user directly to a specific page with pre-filled data. In this boilerplate, we use auto_route to handle deep links efficiently.

Current Implementation

The boilerplate currently implements deep linking primarily for the Reset Password flow.

1. Platform Configuration

Android

Deep links are registered in android/app/src/main/AndroidManifest.xml using an intent-filter.

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- Replace 'myapp-scheme' with your app scheme -->
    <data android:scheme="myapp-scheme" android:host="reset-password" />
</intent-filter>

iOS

To enable deep links on iOS, you need to add the CFBundleURLTypes to your ios/Runner/Info.plist:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>reset-password</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp-scheme</string>
        </array>
    </dict>
</array>

2. Deep Link Handling (Flutter)

The deep link is parsed in lib/main.dart within the MaterialApp.router configuration. We use the deepLinkBuilder to map incoming URIs to our internal route paths.

routerConfig: appRouter.config(
  deepLinkBuilder: (deepLink) {
    // Handle reset-password deep link
    if (deepLink.uri.scheme == 'myapp-scheme' &&
        deepLink.uri.host == 'reset-password') {
      return DeepLink.path(
        '/reset-password${deepLink.uri.query.isEmpty ? '' : '?${deepLink.uri.query}'}',
      );
    }
    // Default routing...
  },
),

3. Route Definition

The route must be defined in lib/app_router.dart with a matching path:

AutoRoute(page: ResetPasswordRoute.page, path: '/reset-password'),

4. Handling Parameters

Pages can receive data from deep links using @QueryParam. For example, in lib/pages/auth/login/reset_password/page.dart:

@RoutePage()
class ResetPasswordPage extends HookConsumerWidget {
  final String? token;
  final String? email;

  const ResetPasswordPage({
    super.key,
    @QueryParam('token') this.token,
    @QueryParam('email') this.email,
  });
  
  // ...
}

Testing Deep Links

Android

Use the adb tool to simulate a deep link:

adb shell am start -W -a android.intent.action.VIEW \
    -d "myapp-scheme://reset-password?token=MY_TOKEN&email=user@example.com" \
    com.your.package.name

iOS

Use the xcrun tool to test on the simulator:

xcrun simctl openurl booted "myapp-scheme://reset-password?token=MY_TOKEN&email=user@example.com"

Customizing the Scheme

To change the deep link scheme (e.g., from myapp-scheme to myapp):

Update AndroidManifest.xml (android:scheme).
Update Info.plist (CFBundleURLSchemes).
Update the check in lib/main.dart's deepLinkBuilder.

Deep Links

On this page