Chapitre 2 · Leçon 1
Navigation déclarative et deep linking
GoRouter est la solution officielle de routing pour Flutter. Il supporte le deep linking, les paramètres de route, les routes imbriquées et la navigation par URL — essentiel pour les apps web/desktop.
router.dart
1import 'package:go_router/go_router.dart';
2import 'package:riverpod_annotation/riverpod_annotation.dart';
3
4
5GoRouter router(RouterRef ref) {
6 return GoRouter(
7 initialLocation: '/',
8 debugLogDiagnostics: true,
9
10 // Redirection pour l'authentification
11 redirect: (context, state) {
12 final isAuthenticated = ref.read(authProvider).isAuthenticated;
13 final isAuthRoute = state.matchedLocation.startsWith('/auth');
14
15 if (!isAuthenticated && !isAuthRoute) return '/auth/login';
16 if (isAuthenticated && isAuthRoute) return '/';
17 return null;
18 },
19
20 routes: [
21 GoRoute(
22 path: '/',
23 builder: (_, __) => const HomeScreen(),
24 ),
25 GoRoute(
26 path: '/tutorials',
27 builder: (_, __) => const TutorialsScreen(),
28 routes: [
29 GoRoute(
30 path: ':slug',
31 builder: (_, state) => TutorialScreen(
32 slug: state.pathParameters['slug']!,
33 ),
34 routes: [
35 GoRoute(
36 path: 'lesson/:lessonSlug',
37 builder: (_, state) => LessonScreen(
38 tutorialSlug: state.pathParameters['slug']!,
39 lessonSlug: state.pathParameters['lessonSlug']!,
40 ),
41 ),
42 ],
43 ),
44 ],
45 ),
46 ShellRoute(
47 builder: (_, __, child) => AdminShell(child: child),
48 routes: [
49 GoRoute(path: '/admin', builder: (_, __) => const AdminDashboard()),
50 GoRoute(path: '/admin/tutorials', builder: (_, __) => const AdminTutorials()),
51 ],
52 ),
53 ],
54 );
55}
56
57// Navigation dans le code
58void navigateToLesson(BuildContext context, String tSlug, String lSlug) {
59 context.go('/tutorials/$tSlug/lesson/$lSlug');
60}context.go() remplace toute la navigation (comme replace), context.push() empile sur l'historique (comme push). Pour les deep links, utilise toujours go().
GoRouter supporte plusieurs patterns de navigation : navigation simple, navigation imbriquée (ShellRoute), et redirection conditionnelle. Voici un comparatif :
| Pattern | Cas d'usage | API |
|---|---|---|
| Simple | Routes plates | GoRoute |
| Imbriquée | Layout partagé (tabs, sidebar) | ShellRoute |
| Redirection | Auth gates, deep links | redirect: callback |
Pour aller plus loin, consulte la [doc officielle GoRouter](https://pub.dev/packages/go_router).
Flutter avec Riverpod + GoRouter est une stack complète et bien supportée. Riverpod gère l'état de façon réactive, GoRouter gère la navigation de façon déclarative — les deux s'intègrent naturellement.