7.11. Navigation et routage dans Flutter : navigation avec Stack
Page 96 | Écouter en audio
7.11. Navigation et routage dans Flutter : Stack Navigation
La navigation et le routage font partie intégrante de toute application moderne, et Flutter ne fait pas exception. Flutter facilite la création de belles interfaces utilisateur avec un riche ensemble de widgets prédéfinis, mais il offre également un puissant système de navigation et de routage pour gérer la façon dont les utilisateurs se déplacent dans votre application. Dans cet article, nous allons explorer le concept de « Stack Navigation » dans Flutter.
Comprendre la navigation dans la pile
Dans Flutter, la navigation entre les différents écrans ou pages de l'application est gérée par quelque chose appelé « Navigateur », qui fonctionne de manière très similaire à une pile en informatique. Chaque fois qu'un nouveau script (ou page) est ouvert, il est "poussé" vers le haut de la pile. Lorsqu'un script est fermé, il est "dépilé" et supprimé de la pile. C'est ce qu'on appelle la "Navigation dans la pile".
L'avantage de ce système est qu'il permet un flux de navigation intuitif et facile à gérer. Vous pouvez facilement revenir à la page précédente simplement en ouvrant le script actuel, et vous avez toujours une référence claire à la "page précédente" sous la forme du script en haut de la pile.
Comment implémenter Stack Navigation
Pour commencer à utiliser la navigation par pile dans Flutter, vous devrez utiliser la classe « Navigator ». La classe 'Navigator' dispose de deux méthodes principales que vous utiliserez pour gérer votre navigation : 'push' et 'pop'.
La méthode 'push' est utilisée pour ouvrir un nouveau script. Il reçoit un objet 'Route' qui décrit la page que vous souhaitez ouvrir. Il existe plusieurs façons de créer un objet « Route », mais la plus courante consiste à utiliser la classe « MaterialPageRoute », qui crée un itinéraire qui passe à la nouvelle page à l'aide d'une animation de transition de conception matérielle.
La méthode 'pop', quant à elle, est utilisée pour fermer le script actuel et revenir au précédent sur la pile. Il ne nécessite aucun argument car il supprime simplement le script en haut de la pile.
Exemple de navigation dans la pile
Jetons un coup d'œil à un exemple de la façon dont vous pouvez utiliser la navigation par pile dans Flutter. Supposons que votre application comporte deux pages, "HomePage" et "DetailPage", et que vous souhaitiez permettre à l'utilisateur de naviguer entre elles.
Tout d'abord, vous devrez définir vos itinéraires. Cela se fait dans l'objet « MaterialApp » de votre application, qui possède une propriété « routes » qui prend une carte des noms de routes pour les fonctions de création de routes. Voici comment définir vos itinéraires :
Vous pouvez ensuite utiliser la méthode « Navigator.pushNamed » pour accéder à la « DetailPage » à partir de la « Page d'accueil ». Voici comment procéder :
Enfin, pour revenir à la 'HomePage' depuis la 'DetailPage', vous pouvez utiliser la méthode 'Navigator.pop'. Voici comment procéder :
Voici comment implémenter la navigation dans la pile dans Flutter. Il s'agit d'un système puissant et flexible qui peut gérer à peu près tous les flux de navigation que vous pouvez imaginer.
Conclusion
En résumé, la navigation empilée dans Flutter est un moyen efficace de gérer le flux de navigation dans votre application. Avec la classe 'Navigator' et ses méthodes 'push' et 'pop', vous pouvez facilement ouvrir de nouvelles pages et revenir aux pages précédentes. Bien qu'il faille un certain temps pour s'habituer à l'idée de la navigation empilée, une fois que vous l'aurez compris, vous constaterez qu'elle offre une grande flexibilité pour créer des expériences utilisateur intuitives et agréables.
Répondez maintenant à l’exercice sur le contenu :
Qu'est-ce que la « Stack Navigation » dans Flutter et comment peut-elle être implémentée ?
Tu as raison! Félicitations, passez maintenant à la page suivante
Vous avez raté! Essayer à nouveau.
Page suivante de lebook gratuit :
97Navigation et routage dans Flutter : Navigation avec push/pop
2 minutes
Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !
