flutter/flutter-routing-and-navigation

Que fait flutter-routing-and-navigation ?

Naviguer entre différentes vues ou créer des liens profonds vers des écrans ou routes dans une application Flutter.

Description

Cette compétence permet à un agent IA de gérer la navigation et le routage dans une application Flutter. Elle couvre :

• La navigation entre les écrans (routes) avec Navigator.push / Navigator.pop.
• La configuration de routes nommées via onGenerateRoute ou routes dans MaterialApp.
• La mise en place de liens profonds (deep links) pour accéder à des écrans spécifiques depuis des URLs.
• L'utilisation de packages populaires comme go_router ou auto_route pour un routage déclaratif.

L'agent peut générer du code de navigation, recommander des structures de routage, ou corriger des erreurs de navigation courantes.

Utilisation

Exemple 1 : Navigation simple avec Navigator

// Aller vers un nouvel écran
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const SecondScreen()),
);

// Revenir à l'écran précédent
Navigator.pop(context);

Exemple 2 : Routes nommées

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => const HomeScreen(),
    '/details': (context) => const DetailsScreen(),
  },
);

Exemple 3 : Deep links avec go_router

final router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(path: '/', builder: (context, state) => const HomePage()),
    GoRoute(
      path: '/details/:id',
      builder: (context, state) => DetailsPage(id: state.pathParameters['id']!),
    ),
  ],
);

MaterialApp.router(routerConfig: router);

Configuration des liens profonds

Pour activer les deep links sur Android, configurez le fichier AndroidManifest.xml :

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="https" android:host="www.example.com" />
</intent-filter>

Sur iOS, ajoutez une entrée dans le fichier Info.plist :

<key>FlutterDeepLinkingEnabled</key>
<true/>

Bonnes pratiques

• Utilisez Navigator 2.0 (Router API) pour des cas complexes nécessitant une navigation déclarative ou des deep links.
• Préférez go_router pour une solution déclarative simple et maintenable.
• Évitez les Navigator.push sans gestion de route ; préférez des routes nommées ou des GoRoute.
• Pour passer des arguments à un écran, utilisez les routeSettings ou les paramètres de route de go_router.

Références

• Documentation officielle Flutter sur la navigation
• Package go_router
• Deep links dans Flutter