7.2. Navigation et routage dans Flutter : navigation sur plusieurs écrans

Página 87

La navigation et le routage sont des éléments cruciaux dans toute application. Dans Flutter, ils jouent un rôle essentiel en offrant une expérience utilisateur optimale. Cet article traite de la navigation et du routage dans Flutter, en se concentrant sur la navigation sur plusieurs écrans. Commençons par une compréhension de base.

Dans Flutter, tout est un widget. Ainsi, chaque « écran » de votre application n’est qu’un widget. La navigation entre ces widgets (ou écrans) s'effectue à l'aide d'une pile, similaire au modèle de pile dans les structures de données. Chaque fois qu'un nouveau widget est ouvert, il est placé sur cette pile. Et lorsque l'utilisateur termine d'interagir avec un widget et revient, le widget est retiré de la pile. C'est le concept de base de la navigation dans Flutter.

Pour accéder à un nouvel écran, vous devez utiliser la méthode « Navigator.push » fournie par Flutter. Cette méthode prend deux arguments : le contexte actuel et le chemin vers le nouvel écran. L'itinéraire est généralement créé à l'aide de la méthode 'MaterialPageRoute', qui prend un argument du constructeur - le widget que vous souhaitez ouvrir.

Par exemple :

Navigateur.push( contexte, MaterialPageRoute(builder : (contexte) => SecondScreen()), );

Le code ci-dessus ouvre un nouveau widget appelé « SecondScreen ». Le « contexte » ici est le contexte actuel du widget. Il est transmis à « MaterialPageRoute » afin qu'il sache où placer le nouveau widget dans l'arborescence des widgets.

Pour revenir à l'écran précédent, vous pouvez utiliser la méthode 'Navigator.pop'. Cette méthode supprime le widget actuel de la pile et revient au widget précédent. Vous pouvez utiliser cette méthode lorsque l'utilisateur a fini d'interagir avec le widget actuel. Par exemple, vous pouvez appeler « Navigator.pop » lorsque l'utilisateur appuie sur un bouton de retour.

De plus, Flutter fournit également un moyen de transmettre des données entre les widgets pendant la navigation. Vous pouvez transmettre les données comme argument au constructeur du widget que vous ouvrez. Par exemple :

Navigateur.push( contexte, MatérielPageRoute( constructeur : (contexte) => SecondScreen (données : 'Hello, World !'), ), );

Le code ci-dessus transmet une chaîne « Hello, World ! » sur « Deuxième écran ». Dans 'SecondScreen', vous pouvez accéder à ces données via l'argument constructeur.

En plus de la navigation de base, Flutter prend également en charge le routage nommé. Dans le routage nommé, vous définissez une table de routage avec les noms de routage et leurs widgets respectifs. Vous pouvez ensuite accéder à un widget en utilisant son nom d'itinéraire. Ceci est utile lorsque votre application comporte de nombreux écrans et que la navigation devient complexe.

Par exemple, vous pouvez définir une table de routage comme celle-ci :

fin des itinéraires = { '/' : (contexte) => HomeScreen(), '/seconde' : (contexte) => SecondScreen(), } ;

Vous pouvez ensuite accéder à « SecondScreen » en utilisant son nom d'itinéraire :

Navigator.pushNamed(contexte, '/seconde');

En bref, la navigation et le routage dans Flutter sont simples mais puissants. Ils permettent de gérer la navigation entre les écrans de manière efficace et organisée. De plus, ils offrent la flexibilité de transmettre des données entre les écrans et d'utiliser le routage nommé pour gérer la complexité de la navigation.

Lors de la création d'applications avec Flutter, il est important de comprendre la navigation et le routage pour offrir une expérience utilisateur fluide et intuitive. Assurez-vous donc de prendre le temps d'apprendre et d'expérimenter ces concepts.

Répondez maintenant à l’exercice sur le contenu :

Quel est le but de la méthode « Navigator.push » dans Flutter ?

1Pour supprimer le widget actuel de la pile et revenir au widget précédent. 2Pour ouvrir un nouveau widget et l'ajouter à la pile. 3Pour définir une table de routage avec les noms de routage et leurs widgets respectifs.

Tu as raison! Félicitations, passez maintenant à la page suivante

Vous avez raté! Essayer à nouveau.

Page suivante de lebook gratuit :

887.3. Navigation et routage dans Flutter : transmission de paramètres entre les écrans

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 !