Cours Flutter PDF

Développement Flutter Préparé par: HILMANI ADIL Introduction à Flutter Pr. Hilmani ADIL Définition Flutter est un framework open-source développé par Google, conçu pour créer des applications multiplateformes à partir d'une seule base de code. Il permet aux développeurs de const...

Développement Flutter Préparé par: HILMANI ADIL Introduction à Flutter Pr. Hilmani ADIL Définition Flutter est un framework open-source développé par Google, conçu pour créer des applications multiplateformes à partir d'une seule base de code. Il permet aux développeurs de construire des applications pour Android, iOS, le web, et le bureau, en utilisant des interfaces utilisateur (UI) élégantes et réactives. Le framework repose sur un système de widgets hautement personnalisables, qui facilitent la création d'éléments visuels cohérents et de haute performance. Flutter offre également une fonctionnalité de "Hot Reload", permettant aux développeurs de voir instantanément les changements de code appliqués à l'interface sans perdre l'état de l'application. Pr. Hilmani ADIL Comprendre le framework Flutter Concept Central : Widgets Tout dans Flutter est un widget. Que ce soit un bouton, une image, du texte, ou une mise en page, chaque élément de l'interface utilisateur est un widget. Ces widgets peuvent être combinés et personnalisés pour construire des interfaces complexes, permettant de créer des designs flexibles et esthétiques. Pr. Hilmani ADIL Comprendre le framework Flutter UI Déclarative Flutter adopte une approche déclarative pour créer des interfaces utilisateur. Cela signifie que, plutôt que de décrire chaque étape de la construction de l'UI, vous spécifiez simplement l'apparence finale de l'interface. Cette méthode rend le code plus intuitif et plus facile à gérer. Pr. Hilmani ADIL Comprendre le framework Flutter UI Déclarative Simplification du Code : Au lieu de gérer manuellement chaque changement de l'interface en fonction des interactions utilisateur, vous définissez simplement l'apparence de l'interface pour un certain état. Flutter actualise automatiquement l'interface lorsque cet état change. Meilleure Lisibilité : Le code devient plus facile à lire et à comprendre, car il est organisé autour des états de l'application. Optimisation des Performances : Flutter rend l'interface utilisateur de manière efficace en mettant à jour uniquement les parties qui changent, ce qui améliore les performances. Pr. Hilmani ADIL Comprendre le framework Flutter Performances Natives Flutter se distingue par ses performances élevées, car le code Dart est compilé en code machine natif. Cela permet des animations fluides et une expérience utilisateur rapide. Contrairement aux autres frameworks multiplateformes qui utilisent des ponts pour interagir avec le code natif, Flutter utilise son propre moteur de rendu. Pr. Hilmani ADIL Comprendre le framework Flutter Hot Reload Une des fonctionnalités les plus appréciées de Flutter est le Hot Reload. Il permet de voir instantanément les changements apportés au code de l'application, ce qui accélère le développement et le prototypage. Lorsque vous modifiez le code de l'interface utilisateur ou d'autres éléments de votre application, vous pouvez utiliser Hot Reload pour appliquer ces changements instantanément. Flutter recharge simplement l'UI avec les nouvelles modifications, tout en conservant l'état de l'application (comme les variables et les interactions actuelles). Pr. Hilmani ADIL Comprendre le framework Flutter Hot Reload Une des fonctionnalités les plus appréciées de Flutter est le Hot Reload. Il permet de voir instantanément les changements apportés au code de l'application, ce qui accélère le développement et le prototypage. Lorsque vous modifiez le code de l'interface utilisateur ou d'autres éléments de votre application, vous pouvez utiliser Hot Reload pour appliquer ces changements instantanément. Flutter recharge simplement l'UI avec les nouvelles modifications, tout en conservant l'état de l'application (comme les variables et les interactions actuelles). Pr. Hilmani ADIL Comprendre le framework Flutter Dart : Le Langage de Flutter Dart est le langage de programmation utilisé par Flutter. Développé par Google, il est spécialement conçu pour créer des applications frontend optimisées, notamment pour les applications mobiles et web Flutter utilise le langage de programmation Dart, qui est simple à apprendre pour les développeurs familiers avec des langages comme Java, JavaScript, ou C#. Dart est optimisé pour les applications frontend et assure des performances optimales. Pr. Hilmani ADIL  Configuration de l'environnement de développement Pr. Hilmani ADIL Étapes de l'installation de Flutter 1. Télécharger le SDK Flutter Rendez-vous sur le site officiel de Flutter : flutter.dev. Choisissez votre système d'exploitation (Windows, macOS, ou Linux) et téléchargez le fichier compressé du SDK Flutter. 1. Extraire le SDK Flutter Extrayez le fichier ZIP téléchargé dans un répertoire de votre choix. Par exemple, pour Windows, vous pouvez l'extraire dans C:\flutter. Pr. Hilmani ADIL Étapes de l'installation de Flutter Configurer la Variable d’Environnement PATH Windows :Ouvrez le Panneau de configuration > Système et sécurité > Système. Cliquez sur Paramètres système avancés, puis sur le bouton Variables d'environnement. Dans les Variables système, trouvez et sélectionnez la variable Path, puis cliquez sur Modifier. Ajoutez le chemin du dossier flutter\bin (par exemple, C:\flutter\bin) et cliquez sur OK. Pr. Hilmani ADIL Étapes de l'installation de Flutter 4. Installer un IDE Android Studio : Téléchargez et installez Android Studio depuis developer.android.com/studio. Pendant l’installation, assurez-vous d’inclure les SDK Android et les outils de ligne de commande. Visual Studio Code (Optionnel) : Téléchargez et installez Visual Studio Code depuis code.visualstudio.com. Installez les extensions Flutter et Dart via le Marketplace de Visual Studio Code. Pr. Hilmani ADIL Étapes de l'installation de Flutter 5. Installer les Outils de Développement Android Ouvrez Android Studio. Allez dans Configure > SDK Manager. Assurez-vous que le SDK Android est installé, ainsi que les outils nécessaires pour le développement d’applications. 6. Exécuter la Commande flutter doctor Ouvrez un terminal ou l’invite de commande. Exécutez la commande suivante flutter doctor Pr. Hilmani ADIL Étapes de l'installation de Flutter 7. Configurer un Émulateur ou un Appareil Physique Pour tester vos applications, configurez un émulateur Android via Android Studio ou connectez un appareil physique à votre ordinateur. Si vous utilisez un appareil physique, activez le débogage USB dans les paramètres de votre appareil. Pr. Hilmani ADIL Étapes de l'installation de Flutter Résumé 1. Téléchargez et extrayez le SDK Flutter. 2. Configurez la variable d'environnement PATH. 3. Installez un IDE (Android Studio ou Visual Studio Code). 4. Installez les outils de développement Android. 5. Exécutez flutter doctor pour vérifier la configuration. 6. Configurez un émulateur ou un appareil physique pour tester vos applications. Pr. Hilmani ADIL Structure des Projets Flutter Pr. Hilmani ADIL Structure des Projets Flutter Pr. Hilmani ADIL Structure des Projets Flutter android/ : Contient le code et les ressources spécifiques à l'application Android. Cela inclut les fichiers de configuration (comme build.gradle) et les ressources (images, fichiers de mise en page, etc.) nécessaires pour Android. ios/ : Semblable au dossier Android, il contient tout le code et les ressources spécifiques à l'application iOS, y compris le fichier Runner.xcodeproj pour Xcode. Pr. Hilmani ADIL  Structure des Projets Flutter lib/ : C'est le dossier principal où vous écrivez la logique de votre application Flutter. main.dart : C'est le point d'entrée de l'application. Vous définissez ici la fonction main() qui lance votre application, généralement en appelant runApp() avec le widget racine de votre application. Vous pouvez également créer d'autres fichiers Dart dans ce dossier pour organiser votre code (par exemple, pour les widgets, les modèles, les services, etc.). Pr. Hilmani ADIL Structure des Projets Flutter test/ : Ce dossier est destiné à contenir les tests unitaires et d'intégration de votre application. Flutter offre un support intégré pour écrire des tests, et ce dossier permet de maintenir vos tests organisés. pubspec.yaml : C'est le fichier de configuration du projet. Il contient des informations sur votre application, y compris son nom, sa description, les dépendances utilisées (comme les packages Flutter ou Dart), et d'autres configurations nécessaires. C'est ici que vous ajoutez des dépendances supplémentaires pour votre projet. pubspec.lock : Ce fichier est généré automatiquement et contient la liste des dépendances exactes et leurs versions qui sont installées pour votre projet. Cela assure que tout le monde travaillant sur le projet utilise les mêmes versions des packages. README.md : Ce fichier est destiné à fournir des informations sur votre projet, comme comment le configurer, le construire, et l'exécuter. C'est une bonne pratique d'inclure des instructions claires pour les autres développeurs ou pour vous-même à l'avenir. Pr. Hilmani ADIL Création d'une application de base flutter Pr. Hilmani ADIL Pr. Hilmani ADIL Main.dart L'instruction import 'package:flutter/material.dart'; est essentielle dans une application Flutter car elle permet d'accéder à tous les widgets, classes et fonctions nécessaires pour construire une interface utilisateur conforme aux principes de Material Design. Package : flutter est le package principal de Flutter, tandis que material.dart contient les définitions de widgets qui implémentent le Material Design, un langage de conception créé par Google. Pr. Hilmani ADIL  Main.dart Ce package, vous avez accès à une large gamme de widgets utiles pour construire des applications, notamment : MaterialApp : Le widget racine qui configure le thème, la navigation et d'autres fonctionnalités de l'application. Scaffold : Un conteneur pour les éléments de base d'une interface utilisateur, comme une barre d'application, un corps, et des tiroirs (drawers). AppBar : Un widget de barre d'application qui fournit un en-tête en haut de votre application. Center : Un widget qui centre son enfant dans l'espace disponible. Text : Un widget pour afficher du texte. RaisedButton / ElevatedButton : Des boutons surélevés qui peuvent être utilisés pour les actions. Pr. Hilmani ADIL Main.dart La fonction main est le point de départ de l'exécution de l'application Dart. C'est la première fonction appelée lorsque vous lancez l'application. runApp(MyApp()); : Cette méthode prend un widget en argument (dans ce cas, MyApp) et le rend en tant que racine de l'application Flutter. Fonctionnalité : runApp initialise l'environnement Flutter et construit l'arbre de widgets à partir du widget spécifié. Il s'assure que le widget MyApp et tous ses descendants sont correctement rendus à l'écran. Pr. Hilmani ADIL Main.dart La ligne class MyApp extends StatelessWidget déclare une classe MyApp qui représente un widget dans une application Flutter. class MyApp : Cela définit une nouvelle classe nommée MyApp. extends StatelessWidget : Cela signifie que MyApp hérite de la classe StatelessWidget. Cela indique que ce widget ne maintient pas d'état mutable. En d'autres termes, est un type de widget qui ne peut pas changer d'état. Il est utilisé lorsque l'interface utilisateur dépend uniquement des données qui ne changent pas au cours de la vie du widget. Pr. Hilmani ADIL  Main.dart Widget build(BuildContext context) : La méthode build prend un paramètre BuildContext, qui représente le contexte dans lequel le widget est construit. Il fournit des informations sur la position du widget dans l'arbre des widgets. Retourne un MaterialApp : Le widget racine de votre application est un MaterialApp, qui contient des propriétés comme le titre et le thème de l'application. Pr. Hilmani ADIL Main.dart Le widget Scaffold dans Flutter est un conteneur de mise en page essentiel qui fournit une structure de base pour construire l'interface utilisateur d'une application. Il facilite la création d'une application en intégrant des éléments d'interface utilisateur courants tels que des barres d'application, des tiroirs de navigation, des barres d'état et d'autres composants de mise en page. Pr. Hilmani ADIL Main.dart Les éléments importants du widget Scaffold : Barre d'Application (AppBar) La barre d'application est généralement placée en haut de l'écran et peut contenir un titre, des actions, un menu, etc. Corps (body) La propriété body est utilisée pour afficher le contenu principal de l'écran. Vous pouvez y placer presque tous les widgets, tels que des Column, Row, ListView, etc. Tiroir de Navigation (Drawer) Le Scaffold permet également d'ajouter un tiroir de navigation qui peut être ouvert par un geste de glissement ou en appuyant sur une icône. Pr. Hilmani ADIL Main.dart Les éléments importants du widget Scaffold : Bouton Flottant (floatingActionButton) Vous pouvez ajouter un bouton flottant qui flotte au-dessus du contenu de l'application, généralement utilisé pour des actions importantes. SnackBar Le Scaffold est également le lieu où les SnackBar sont affichés. Un SnackBar est une notification temporaire qui apparaît en bas de l'écran. Pr. Hilmani ADIL Main.dart Pr. Hilmani ADIL Les Widgets de base flutter Pr. Hilmani ADIL Widgets de base Container : Utilisé pour créer une zone de contenu avec des propriétés de mise en forme comme la couleur, le padding, et les marges. Text : Affiche du texte à l'écran avec diverses options de style. Row et Column : Permettent de disposer des widgets en ligne (Row) ou en colonne (Column), utiles pour organiser l'interface. Image : Affiche des images à partir de diverses sources, telles que les assets ou les URLs. Icon : Affiche des icônes provenant d'une bibliothèque d'icônes intégrée. Pr. Hilmani ADIL Widgets de base Button (ElevatedButton, TextButton, IconButton, etc.) : Widgets interactifs pour capturer les actions de l'utilisateur. Scaffold : Structure de base pour les écrans, contenant des propriétés comme appBar, body, et floatingActionButton pour une mise en page standard. AppBar : Barre d'en-tête qui apparaît en haut de l'écran, souvent utilisée pour le titre et les actions principales. ListView : Permet de créer une liste défilante d'éléments, utile pour afficher des données sous forme de liste. Stack : Superpose plusieurs widgets les uns sur les autres, permettant des dispositions plus complexes. Pr. Hilmani ADIL Widget - Container Le widget Container est l'un des widgets de base les plus polyvalents dans Flutter. Il sert de boîte de mise en page et de style pour contenir d'autres widgets, offrant diverses options de personnalisation Child : Le widget enfant contenu dans le Container. Il peut s'agir de n'importe quel autre widget, tel que du texte, une image, un bouton, etc. padding : Espace intérieur entre le bord du Container et son enfant, défini par la classe EdgeInsets. margin : Espace extérieur autour du Container, pour créer des espaces entre le Container et les widgets qui l'entourent. color : Définit la couleur d'arrière-plan du Container. Pr. Hilmani ADIL Widget - Container width et height : Définissent les dimensions du Container. decoration : Permet d'appliquer des effets avancés, comme des coins arrondis, une bordure, des ombres, et des dégradés, à l’aide du widget BoxDecoration. alignment : Définit la position de l'enfant à l'intérieur du Container. constraints : Définit des contraintes supplémentaires pour la taille minimale et maximale du Container. Pr. Hilmani ADIL Widget - Container container example 1.txt Pr. Hilmani ADIL Widget - Container container example 2.txt Pr. Hilmani ADIL Widget - Container container example 3.txt Pr. Hilmani ADIL Widget - Container container example 4.txt Pr. Hilmani ADIL Widget – Column and Row En Flutter, Row et Column sont des widgets de mise en page qui permettent de disposer les éléments enfants horizontalement ou verticalement, respectivement. Le widget Row dispose ses enfants horizontalement (de gauche à droite). Row( children: [ Icon(Icons.home), Text('Home'), Icon(Icons.search), ], ) Pr. Hilmani ADIL Widget – Column and Row Le widget Row dispose ses enfants horizontalement (de gauche à droite). Propriétés principales : mainAxisAlignment: Définit l'alignement des enfants le long de l'axe principal (horizontal). crossAxisAlignment: Définit l'alignement des enfants sur l'axe secondaire (vertical). mainAxisSize: Détermine la taille de l'axe principal (soit MainAxisSize.max ou MainAxisSize.min). Pr. Hilmani ADIL Widget – Column and Row container Row 1.txt Pr. Hilmani ADIL Widget – Column and Row container Row 2.txt Pr. Hilmani ADIL Widget – Column and Row Le widget Column dispose ses enfants verticalement (de haut en bas). Propriétés principales : mainAxisAlignment: Définit l'alignement des enfants le long de l'axe principal (VERTICAL). crossAxisAlignment: Définit l'alignement des enfants sur l'axe secondaire (HORIZONTAL). mainAxisSize: Détermine la taille de l'axe principal (soit MainAxisSize.max ou MainAxisSize.min). Pr. Hilmani ADIL Widget – Column and Row Le widget Column dispose ses enfants verticalement (de haut en bas). Propriétés principales : mainAxisAlignment: Définit l'alignement des enfants le long de l'axe principal (VERTICAL). crossAxisAlignment: Définit l'alignement des enfants sur l'axe secondaire (HORIZONTAL). mainAxisSize: Détermine la taille de l'axe principal (soit MainAxisSize.max ou MainAxisSize.min). Pr. Hilmani ADIL Widget – Column and Row container Column 1.txt Pr. Hilmani ADIL Widget – Column and Row container Column 2.txt Pr. Hilmani ADIL Widget – Padding EdgeInsets est une classe en Flutter qui permet de spécifier l'espacement (padding) autour d'un widget. Elle fournit différentes façons de définir l'espace autour des bords d'un Container ou de tout autre widget qui accepte un padding. EdgeInsets.all(double value) padding: EdgeInsets.all(20.0), // Applique un padding de 20 pixels sur tous les côtés EdgeInsets.symmetric({double vertical, double horizontal}) padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0), // 10 pixels en haut et en bas, 20 pixels à gauche et à droite Pr. Hilmani ADIL Widget – Container - Padding EdgeInsets est une classe en Flutter qui permet de spécifier l'espacement (padding) autour d'un widget. Elle fournit différentes façons de définir l'espace autour des bords d'un Container ou de tout autre widget qui accepte un padding. EdgeInsets.all(double value) padding: EdgeInsets.all(20.0), // Applique un padding de 20 pixels sur tous les côtés EdgeInsets.symmetric({double vertical, double horizontal}) padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0), // 10 pixels en haut et en bas, 20 pixels à gauche et à droite Pr. Hilmani ADIL Widget – Column and Row Exemple padding.txt Pr. Hilmani ADIL Widget – Margin Le margin dans Flutter est similaire au padding, mais au lieu de créer un espace à l'intérieur du widget (comme c'est le cas avec le padding), il crée un espace à l'extérieur du widget. Cela permet de séparer un widget des autres widgets environnants. Types de margin : EdgeInsets.all() : Un espacement uniforme tout autour du widget. EdgeInsets.symmetric() : Espacement uniforme horizontalement ou verticalement. EdgeInsets.only() : Espacement personnalisé pour chaque côté (gauche, droite, haut, bas). EdgeInsets.fromLTRB() : Espacement personnalisé pour chaque côté (gauche, droite, haut, bas) Pr. Hilmani ADIL Widget – Column and Row Exemple Margin.txt Pr. Hilmani ADIL Widget – Image Pour afficher des images dans Flutter, vous pouvez utiliser le widget Image qui permet de charger et afficher des images à partir de diverses sources comme des fichiers locaux, des ressources du projet ou une URL. Types de sources d'images : Images locales Images à partir de l'URL Pr. Hilmani ADIL Widget – Column and Row Exemple Image.txt Pr. Hilmani ADIL  Widget – Icons https://api.flutter.dev/flutter/material/Icons-class.html Explication des paramètres : Icons.favorite : Représente une icône de cœur. Il existe de nombreuses icônes disponibles dans Icons comme Icons.access_alarm, Icons.shopping_cart, Icons.home, etc. color : Vous pouvez personnaliser la couleur de l'icône en passant une couleur comme Colors.red, Colors.blue, etc. size : Vous pouvez ajuster la taille de l'icône à l'aide du paramètre size (par exemple, 50 pixels). Pr. Hilmani ADIL Widget – Icons Exemple Icones.txt Pr. Hilmani ADIL Exercice 1 Pr. Hilmani ADIL Exercice 2 Pr. Hilmani ADIL Exercice 3 Pr. Hilmani ADIL State Flutter Pr. Hilmani ADIL Pr. Hilmani ADIL Pr. Hilmani ADIL State management.txt Pr. Hilmani ADIL Pr. Hilmani ADIL State multiprovider.txt Pr. Hilmani ADIL Le widget TextField dans Flutter est utilisé pour créer des champs de saisie de texte. Il est très flexible et personnalisable, ce qui le rend adapté pour les formulaires, les barres de recherche, les champs de mot de passe, et bien plus. TextField( decoration: InputDecoration( labelText: 'Enter your text', hintText: 'Type something...', border: OutlineInputBorder(), icon: Icon(Icons.text_fields), ), onChanged: (text) { print('Text changed: $text'); }, onSubmitted: (text) { print('Text submitted: $text'); }, ) Pr. Hilmani ADIL State textfield.txt Pr. Hilmani ADIL In Flutter, ListView is a widget that allows you to display a scrolling list of widgets. It's commonly used when you need to display a dynamic list of items that can be scrollable, either vertically or horizontally. Below is an overview of how to use ListView in Flutter. Pr. Hilmani ADIL listview.txt Pr. Hilmani ADIL ListView.builder est un constructeur de ListView qui permet de créer des listes avec un grand nombre d'éléments de manière dynamique et efficace. Contrairement à un ListView classique où tous les éléments sont rendus dès le départ, ListView.builder construit et affiche uniquement les éléments visibles à l'écran, améliorant ainsi les performances, surtout lorsque la liste est longue. ListView.builder( itemCount: 100, // Nombre d'éléments dans la liste itemBuilder: (BuildContext context, int index) { return ListTile( title: Text('Élément $index'), ); }, ) Pr. Hilmani ADIL itemCount : Spécifie le nombre total d'éléments dans la liste. Cela permet à Flutter de savoir combien d'éléments il y a et de les rendre au fur et à mesure du défilement. itemBuilder : Cette fonction est appelée pour chaque élément de la liste à afficher. Elle prend deux paramètres : context : Le contexte de construction du widget. index : L'indice de l'élément actuellement en construction (commence à 0). Pr. Hilmani ADIL Le widget Expanded dans Flutter est un widget utilisé pour donner à un enfant d'un Column, Row ou Flex un espace flexible. En d'autres termes, il permet de remplir l'espace disponible de manière proportionnelle entre plusieurs enfants dans un conteneur flexible. Voici comment Expanded fonctionne : il prend l'espace restant disponible dans un parent de type Column, Row, ou Flex et le répartit entre ses enfants. Si plusieurs enfants sont enveloppés dans un widget Expanded, l'espace disponible est divisé de manière égale, ou selon les facteurs d'expansion que vous avez définis. Pr. Hilmani ADIL Liste des Taches.txt Pr. Hilmani ADIL Formulaire de stagiaire 1.txt Pr. Hilmani ADIL Formulaire de stagiaire 2.txt Pr. Hilmani ADIL Navigation Flutter Pr. Hilmani ADIL Navigator de Flutter Le Navigator de Flutter est une classe utilisée pour gérer la navigation entre les différents écrans ou pages d'une application. Il fonctionne comme une pile (stack), où chaque nouvel écran est empilé sur le dessus de la pile, et revenir en arrière signifie dépiler la pile. Pr. Hilmani ADIL  Navigator de Flutter La navigation stack dans Flutter est une structure qui gère l'ordre et l'historique des pages ou écrans d'une application. Flutter utilise une pile (stack) pour ajouter ou retirer des pages : chaque nouvel écran est empilé (pushed) sur la pile, et revenir en arrière signifie dépiler (pop) un écran de la pile. Concepts fondamentaux de la navigation stack Pousser une nouvelle route (push) Une nouvelle page est ajoutée au sommet de la pile. Dépiler une route (pop) La page actuelle est retirée de la pile, et l'utilisateur retourne à la page précédente. Pr. Hilmani ADIL Navigator de Flutter Pr. Hilmani ADIL Navigation Push.txt Pr. Hilmani ADIL Navigation Pop.txt Pr. Hilmani ADIL  Routes nommées de Flutter (Named Routes) Les routes nommées dans Flutter sont une méthode structurée pour gérer la navigation entre différentes pages (écrans) d'une application. Avec cette approche, chaque écran est associé à une chaîne (un nom) qui simplifie l'organisation et la navigation. Définir et utiliser des routes nommées Initialiser les routes dans MaterialApp Utilisez la propriété routes pour associer les noms des routes aux widgets correspondants. Naviguer vers une route nommée Utilisez Navigator.pushNamed ou Navigator.pop pour naviguer entre les pages. Pr. Hilmani ADIL Routes nommées de Flutter (Named Routes) class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( // Définir la route initiale initialRoute: '/', // Définir les routes nommées routes: { '/': (context) => HomePage(), // Page principale '/about': (context) => AboutPage(), // Page à propos '/settings': (context) => SettingsPage(), // Page des paramètres }, ); } Pr. Hilmani ADIL Named Routes.txt Pr. Hilmani ADIL Named Routes 2.txt Pr. Hilmani ADIL Passage des paramètres en utilisant Navigator Navigator.push( context, MaterialPageRoute( builder: (context) => GreetingPage(nom: _nom), // Passer le nom ici ), ); Pr. Hilmani ADIL Passage paramètres en utilisant navigator.txt Pr. Hilmani ADIL Passage des paramètres en utilisant Named routes Pour passer des paramètres entre les pages en utilisant des routes nommées dans Flutter, vous devez d'abord définir les routes dans votre application à l'aide de la propriété routes de MaterialApp. Ensuite, vous pouvez naviguer vers ces pages en passant des arguments via Navigator.pushNamed() et récupérer les paramètres dans la page cible. Pr. Hilmani ADIL  Passage des paramètres en utilisant Named routes routes: { '/': (context) => HomePage(), '/greeting': (context) => GreetingPage(), } Navigator.pushNamed( context, '/greeting', arguments: _nom, // Le nom est passé en argument ); final String nom = ModalRoute.of(context)!.settings.arguments as String; Pr. Hilmani ADIL Passage paramètres en utilisant named routes.txt Pr. Hilmani ADIL Passage de plusieurs paramètres Pour passer deux paramètres, tels que le nom et le prénom, entre les pages en utilisant des routes nommées, vous pouvez utiliser un objet ou une map pour encapsuler les deux valeurs et les transmettre ensemble. Navigator.pushNamed( context, '/greeting', arguments: {'nom': _nom, 'prenom': _prenom}, // Passer les paramètres sous forme de Map ); final Map arguments = ModalRoute.of(context)!.settings.arguments as Map; final String nom = arguments['nom']!; final String prenom = arguments['prenom']!; Pr. Hilmani ADIL Passage plusieurs parametres.txt Pr. Hilmani ADIL Passage d une liste en paramètres Pour passer une liste d'objets entre les pages dans Flutter via Navigator.pushNamed(), vous pouvez encapsuler la liste dans des arguments et les récupérer sur la page cible de la même manière que pour les paramètres simples. routes: { '/': (context) => HomePage(), '/stagiaires': (context) => StagiairesPage(), void _goToStagiairesPage() { }, Navigator.pushNamed( context, '/stagiaires', arguments: stagiaires, // Passer la liste des stagiaires ); } final List stagiaires = ModalRoute.of(context)!.settings.arguments as List; Pr. Hilmani ADIL Passage d une liste.txt Pr. Hilmani ADIL Exercice des produits dans un magasin Pr. Hilmani ADIL