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.0Basic 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