Image de l'article Widgets dans Flutter : Naviguer entre les écrans

6.5. Widgets dans Flutter : Naviguer entre les écrans

Page 77 | Écouter en audio

Les widgets sont des composants clés lors de la création d'applications dans Flutter. Ce sont les éléments de base de l’interface utilisateur de Flutter et chaque widget est une partie immuable de l’interface utilisateur. Dans ce contexte, un aspect important des widgets dans Flutter est la navigation entre les écrans. La navigation entre les écrans est un aspect crucial de la création d'applications mobiles. Dans Flutter, la navigation entre les écrans est gérée par quelque chose appelé Navigator, qui est un widget qui gère une pile d'objets Route.

Le navigateur fonctionne de la même manière que la navigation sur un site Web. Lorsqu'un utilisateur ouvre une application, il commence à la « page d'accueil » et à partir de là, il peut naviguer vers d'autres « pages » ou écrans. Chaque fois qu'un nouvel écran est ouvert, il est empilé au sommet de la pile. Lorsque l'utilisateur a fini d'interagir avec un écran et le ferme, cet écran est retiré de la pile et l'écran précédent redevient actif.

Pour naviguer entre les écrans dans Flutter, vous devez utiliser la méthode « Navigator.push » pour ouvrir un nouvel écran et « Navigator.pop » pour fermer l'écran actuel et revenir au précédent. Voici un exemple de la façon dont vous pouvez procéder :

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

Et voici comment fermer l'écran actuel et revenir au précédent :

Navigateur.pop (contexte);

Vous pouvez également transmettre des arguments entre les écrans pendant la navigation. Par exemple, si vous souhaitez passer une valeur d'un écran à un autre, vous pouvez procéder comme ceci :

Navigateur.push( contexte, MatérielPageRoute( builder : (contexte) => SecondScreen (valeur : 'Bonjour de FirstScreen !'), ), );

Et dans SecondScreen, vous pouvez accéder à la valeur transmise comme ceci :

la classe SecondScreen étend StatelessWidget { valeur de chaîne finale ; SecondScreen({Key key, @required this.value}) : super(key: key); @passer outre Construction du widget (contexte BuildContext) { retourner l'échafaudage ( barre d'application : barre d'application ( titre : Texte('Deuxième écran'), ), corps : Centre ( enfant : Texte('Valeur transmise : $valeur'), ), ); } }

Ce ne sont que les bases de la navigation entre les écrans dans Flutter. Il existe de nombreuses autres fonctionnalités avancées que vous pouvez utiliser, telles que la navigation nommée, le renvoi des données à l'écran précédent, la navigation avec des animations personnalisées et bien plus encore. Mais pour commencer, comprendre comment utiliser le Navigateur pour pousser et supprimer des itinéraires est une première étape cruciale.

Pour résumer, les widgets de Flutter constituent la base de la création de l'interface utilisateur. Ils sont immuables et chaque fois que vous souhaitez modifier l’apparence d’un widget, vous devez en créer un nouveau. La navigation entre les écrans est gérée par un widget appelé Navigator, qui empile les écrans au fur et à mesure de leur ouverture et les supprime de la pile lorsqu'ils sont fermés. Vous pouvez utiliser la méthode « push » pour ouvrir un nouvel écran et « pop » pour fermer celui actuel. De plus, vous pouvez transmettre des arguments entre les écrans pendant la navigation, ce qui peut être utile pour transmettre des données d'un écran à un autre.

J'espère que ce texte vous a aidé à mieux comprendre les widgets dans Flutter et comment naviguer entre les écrans. N'oubliez pas que la pratique rend parfait, alors continuez à vous entraîner et à expérimenter différents widgets et méthodes de navigation pour devenir plus à l'aise avec Flutter.

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

Dans le cadre du développement d’applications dans Flutter, quelle est la fonction du widget Navigator ?

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

Vous avez raté! Essayer à nouveau.

Image de l'article Widgets dans Flutter : gestion de l'état

Page suivante de lebook gratuit :

78Widgets dans Flutter : gestion de l'état

3 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 !

Get it on Google Play Get it on App Store

+ 6,5 millions
d'étudiants

Certificat gratuit et
valide avec QR Code

48 mille exercices
gratuits

Note de 4,8/5 dans les
magasins d'applications

Cours gratuits en
vidéo, audio et texte