Overview


Flutter deep links allow users to navigate directly to specific content within your app from external sources like websites, emails, or other apps. Flutter provides excellent cross-platform deep linking support through GoRouter and platform-specific configurations.

Types of deep linking supported by smler

iOS: Universal Links

Android: App Links

Legacy custom scheme deep links are not supported by smler which are like app:// In support with modern approach we are not implementing it. Universal Links were introduced in 2017 and almost all devices being used currently are supported by it.

Prerequisites

Development

  • Flutter 3.0+

  • Dart 2.17+

  • Go Router Package

  • Android Studio / Xcode

What's provided by smler

  • Managed domain and hosting for verification files

  • Automatic HTTPS and SSL certificates

  • Seamless cross platform support

  • Managing AASA files and assetlinks.json file

Go Router Setup

Install GoRouter in your application. Go Router is the recommended navigation package for Flutter that provides excellent deep linking support

Add the following dependency in your pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  go_router: ^12.0.0
  
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

Basic GoRouter Configuration

Here's a sample example of how to use go router in your application. You can updated the code according to your use case.

lib/main.dart file

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

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

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

  final GoRouter _router = GoRouter(
    initialLocation: '/',
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const HomeScreen(),
      ),
      GoRoute(
        path: '/product/:productId',
        builder: (context, state) {
          final productId = state.pathParameters['productId']!;
          return ProductScreen(productId: productId);
        },
      ),
      GoRoute(
        path: '/profile/:userId',
        builder: (context, state) {
          final userId = state.pathParameters['userId']!;
          return ProfileScreen(userId: userId);
        },
      ),
      GoRoute(
        path: '/dashboard',
        builder: (context, state) => const DashboardScreen(),
      ),
    ],
  );

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

For a more advanced approach you can refer to flutter go router documentation here. Where they go in depth about the routing architecture.

Published with LeafPad