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

Página 88

La navigation et le routage sont des composants essentiels à la création d'applications multi-écrans. Flutter, avec son langage Dart, offre un moyen efficace et efficient de gérer la navigation et le routage dans vos applications. Approfondissons le sujet et comprenons comment le passage de paramètres entre écrans peut être effectué dans Flutter.

Dans Flutter, la navigation et le routage sont gérés par une classe appelée Navigator. Le Navigateur fonctionne comme une pile, où chaque itinéraire (ou écran) est empilé les uns sur les autres. Lorsqu'un utilisateur ouvre une application, le premier écran qu'il voit est appelé itinéraire d'accueil ou « accueil ». À partir de là, chaque nouvel écran vers lequel l'utilisateur accède est empilé au-dessus de l'itinéraire initial.

La transmission de paramètres entre les écrans dans Flutter est un processus simple et direct. Les paramètres sont passés en arguments à la fonction Navigator.push(). La fonction push() accepte deux paramètres : le contexte actuel et la nouvelle route. La nouvelle route est une instance de MaterialPageRoute, qui à son tour prend un paramètre de générateur. Le paramètre builder est une fonction qui renvoie un nouveau widget, qui est le nouvel écran vers lequel l'utilisateur sera dirigé.

Par exemple, si nous voulons passer un paramètre "nom d'utilisateur" à un nouvel écran, nous pouvons le faire comme suit :

Navigateur.push( contexte, MatérielPageRoute( constructeur : (contexte) => NewScreen (nom d'utilisateur : 'John Doe'), ), );

Dans l'exemple ci-dessus, nous passons le paramètre "username" au nouvel écran "NewScreen". Le paramètre est ensuite accessible sur le nouvel écran en utilisant la syntaxe widget.username.

En plus de transmettre des paramètres aux nouveaux écrans, Flutter permet également de transmettre les données du nouvel écran à l'écran précédent. Cela se fait à l'aide de la fonction Navigator.pop(). La fonction pop() accepte deux paramètres : le contexte actuel et les données à retourner.

Par exemple, si nous voulons renvoyer une valeur de « succès » du nouvel écran à l'écran précédent, nous pouvons procéder comme ceci :

Navigator.pop(contexte, 'succès');

Dans l'exemple ci-dessus, nous renvoyons la valeur « succès » pour l'écran précédent. La valeur renvoyée est ensuite accessible sur l'écran précédent à l'aide de la fonction Navigator.push().

Par exemple, nous pouvons faire quelque chose comme :

résultat final = attendre Navigator.push ( contexte, MatérielPageRoute( constructeur : (contexte) => NewScreen (nom d'utilisateur : 'John Doe'), ), ); if (résultat == 'succès') { // Faire quelque chose }

Dans l'exemple ci-dessus, nous attendons une valeur de retour du nouvel écran. Si la valeur renvoyée est « succès », alors nous faisons quelque chose.

En bref, la navigation et le routage dans Flutter sont gérés par la classe Navigator, qui fonctionne comme une pile. La transmission des paramètres entre les écrans se fait via les fonctions Navigator.push() et MaterialPageRoute(), tandis que la transmission des données à l'écran précédent se fait via la fonction Navigator.pop().

Avec ces outils en main, vous pouvez créer des applications Flutter complexes et avancées avec plusieurs écrans et transmettre des paramètres entre eux. La navigation et le routage sont fondamentaux pour créer des applications Flutter, et comprendre leur fonctionnement est essentiel pour devenir un développeur Flutter efficace.

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

Comment la navigation et le routage sont-ils gérés dans Flutter et comment les paramètres sont-ils transmis entre les écrans ?

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

Vous avez raté! Essayer à nouveau.

Page suivante de lebook gratuit :

897.4. Navigation et routage dans Flutter : navigation avec des itinéraires nommés

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