Route — qu'est-ce que c'est, types et création de routes dans Flutter

Qu'est-ce que Route dans Flutter

Route est le fondement du système de navigation Flutter. Chaque écran que l'utilisateur voit dans une application est représenté par un objet Route situé dans la pile du Navigator. Route abstrait l'écran du code de contrôle : Navigator ajoute et supprime Route, tandis qu'à l'intérieur de Route se trouve l'interface que l'utilisateur voit. Cette architecture sépare la responsabilité entre la navigation et l'affichage.

Contrairement au simple remplacement de widgets, Route fournit des services indisponibles pour les widgets ordinaires : ModalBarrier (assombrissement de l'arrière-plan lorsqu'une boîte de dialogue est ouverte), contrôle de l'animation d'entrée et de sortie, gestion du bouton de retour matériel sur Android et intégration avec l'animation Hero pour des transitions fluides entre les écrans.

Selon Flutter Cookbook (2026), Route est un élément clé pour l'animation Hero : un widget Hero sur une Route anime automatiquement la transition vers un widget Hero sur la Route suivante, créant un effet d'élément « volant ». Ceci est possible précisément parce que Route maintient les deux écrans dans l'Overlay pendant l'animation.

Route comme bloc de construction de la navigation

Route est la base à la fois pour les applications mobiles simples (via Navigator 1.0) et pour les scénarios complexes avec liens profonds (Navigator 2.0). Dans Navigator 2.0, Route représente une Page que RouterDelegate convertit à partir de la configuration de route. Ainsi, comprendre Route est essentiel pour travailler avec tout système de navigation Flutter — indépendamment de l'approche ou du paquet choisi.

Types de Route : MaterialPageRoute et CupertinoPageRoute

Flutter fournit plusieurs implémentations intégrées de Route, chacune adaptant le comportement à une plateforme spécifique. Choisir le bon type de Route affecte l'expérience utilisateur : l'animation Material sur Android et l'animation Cupertino sur iOS créent la sensation d'une application « native ».

MaterialPageRoute : standard pour Android

MaterialPageRoute est l'implémentation de Route la plus utilisée. Elle anime le nouvel écran entrant de bas en haut avec une apparition graduelle. En sortant, l'écran s'anime de haut en bas, retournant à sa position d'origine. La barre d'outils (AppBar) et le corps de l'écran s'animent séparément, créant un effet de hiérarchie.

CupertinoPageRoute : style de navigation iOS

CupertinoPageRoute imite UINavigationController d'iOS. Le nouvel écran entre par la droite, couvrant le précédent. La caractéristique clé est le support du geste interactif de balayage arrière, implémenté via CupertinoBackGestureDetector. Ce geste est géré même pendant l'animation, offrant un comportement naturel familier aux utilisateurs d'iPhone.

Cycle de vie de Route : de la création à la destruction

Route a son propre cycle de vie, qui diffère du cycle de vie d'un StatefulWidget ordinaire. Comprendre ce cycle est nécessaire pour l'initialisation correcte des données, les abonnements aux flux et la libération des ressources lors de la fermeture d'un écran.

Étapes du cycle de vie de Route

Le cycle de vie de Route comprend quatre étapes principales. Transition — Route est créée et animée à l'entrée (didPush est appelé). Actif — Route est entièrement affichée et interagit avec l'utilisateur. Inactif — une autre Route couvre la Route actuelle (dialogue, feuille inférieure), mais la Route reste dans la pile. Détruit — Route est retirée de la pile et détruite, didPop et dispose sont appelés.

Les méthodes du cycle de vie de Route peuvent être surchargées dans une implémentation personnalisée. Par exemple, didPop est appelé lorsque Route est retirée de la pile — ici vous pouvez sauvegarder des données de brouillon. didChangeNext est appelé lorsque la Route suivante dans la pile a changé — utile pour mettre à jour l'UI lorsque l'historique de navigation change.

Selon Flutter API Route.didPop (2026), il est important de ne pas confondre le cycle de vie de Route avec le cycle de vie de State à l'intérieur de Route. StatefulWidget à l'intérieur de Route a son propre initState et dispose, qui sont appelés respectivement pendant les étapes de Transition et Détruit. Route vit plus longtemps que son State interne — Route reste dans l'Overlay même lorsque ses widgets sont temporairement cachés par une autre Route.

Passage de données via Route entre les écrans

Route fournit des mécanismes pour passer des données à la fois à l'entrée (lors de la création) et à la sortie (à la fin). Le passage correct de données via Route élimine le besoin de variables globales et d'InheritedWidget, rendant la navigation type-safe et prévisible.

Pour passer des données à un nouvel écran, utilisez le constructeur du widget récepteur ou le paramètre arguments dans Navigator.pushNamed. À l'intérieur de Route, les données sont accessibles via RouteSettings.arguments, qui est stocké dans l'objet Route. Cette approche fonctionne pour tous les types de Route — MaterialPageRoute, CupertinoPageRoute et les implémentations personnalisées.

Pour retourner des données, utilisez le deuxième argument de Navigator.pop(context, result). Navigator.push retourne Future, qui se termine avec la valeur passée à pop. Si pop est appelé sans argument, Future se termine avec null. Ce mécanisme est analogue à startActivityForResult sur Android et au completion handler sur iOS, mais implémenté via Dart Futures.

Passage de données via le constructeur de Route

Lors de l'appel direct à Navigator.push avec MaterialPageRoute, les données sont passées via le constructeur de l'écran cible. MethodChannel n'est pas utilisé — c'est une interaction Dart pure. Cette approche est préférable pour le passage type-safe d'objets complexes.

Exemple de création de Route personnalisé

Regardons un exemple de création d'une Route personnalisée avec sa propre animation et passage de données. PageRouteBuilder permet de définir des animations d'entrée et de sortie avec un contrôle total sur la courbe d'animation et la durée.

// Route personnalisée avec animation de glissement
Navigator.push(context, PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) {
    return DetailPage(productId: '42');
  },
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    const begin = Offset(0.0, 0.3);
    const end = Offset.zero;
    final tween = Tween(begin: begin, end: end);
    final offsetAnimation = animation.drive(tween);
    return SlideTransition(position: offsetAnimation, child: child);
  },
  transitionDuration: const Duration(milliseconds: 400),
));

// Retourner les données de l'écran
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('Sélectionner'),
);

// Obtenir le résultat sur l'écran appelant
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('Sélectionné : ${result['selected']}');
}

Dans l'exemple, PageRouteBuilder définit une animation personnalisée de glissement depuis le bas avec transparence. transitionDuration définit la vitesse de l'animation. Le code démontre également le passage de résultat : l'écran de détail retourne un Map avec la sélection de l'utilisateur, et l'écran appelant reçoit ces données via le Future de push. Route garantit une isolation complète : les brouillons sur l'écran de détail n'affectent pas l'état de la liste.