Université Moulay Ismail
Faculté des sciences
Master : SDIA
AU : 2024/2025
TP5 : Stateful widgets
Exercice 1 : Création d’un formulaire simple
Objectif : Créer un formulaire Flutter avec validation des champs, et à la soumission,
afficher une boîte de dialogue (AlertDialog) pour que l'utilisateur puisse confirmer ou
annuler l'enregistrement.
Interface attendue :
1. Un formulaire (Form) contenant les champs suivants :
Nom complet (TextFormField) : champ obligatoire
Email (TextFormField) : champ obligatoire et doit contenir un @
Mot de passe (TextFormField) : champ obligatoire et au moins 6
caractères, masqué (obscureText: true)
2. Un bouton “S’inscrire” (ElevatedButton) placé sous les champs.
Comportement attendu :
1. Lorsque l'utilisateur clique sur “S’inscrire” :
Les champs sont validés.
Si la validation est réussie,une boîte de dialogue (AlertDialog) s’affiche
pour confirmer ou annuler l’enregistrement.
2. La boîte de dialogue doit contenir :
Un titre : "Confirmation de l'inscription"
Un message : "Voulez-vous valider votre inscription ?"
Deux boutons : "Valider" : Un message de succès est affiché (ex. via
SnackBar ). "Annuler" : Le AlertDialog se ferme sans enregistrer.
Exercice 2: Affichage d'une image avec Likes/Dislikes et Commentaires
Objectifs : Créer une interface Flutter qui permet :
d’afficher une image,
de comptabiliser les likes et dislikes,
d’afficher une liste de commentaires,
de saisir de nouveaux commentaires via un champ texte.
Interface principale à créer :
1. Une image affichée en haut de l’écran. (Vous pouvez utiliser une image locale ou
via une URL)
2. En dessous de l’image :
Deux icônes cliquables : Bouton "Like 👍 " : augmente le compteur de
likes et Bouton "Dislike 👎 " : augmente le compteur de dislikes
Chaque bouton affiche le nombre de clics à côté de l’icône.
3. Une zone d’affichage des commentaires :
Liste verticale (ListView) des commentaires ajoutés.
4. Un champ texte + bouton "Commenter" :
Permet à l’utilisateur d’ajouter un commentaire
Le commentaire apparaît immédiatement dans la liste
Exercice 3 : Gestion dynamique d’une liste avec Checkbox et suppression
conditionnelle
Objectif : Créer une application Flutter où l’utilisateur peut :
Ajouter dynamiquement des noms dans une liste,
Cocher les éléments,
Supprimer un élément uniquement s’il est coché.
Consigne :
Vous devez développer une interface permettant à l’utilisateur :
1. De saisir un nom et prénom via un TextField
2. D’ajouter cet élément à une liste dynamique affichée sous forme de ListView
3. Chaque élément de la liste contient :
Une Checkbox (pour marquer l’élément comme sélectionné)
Le nom complet
Une icône de suppression (IconButton) qui supprime l’élément
seulement s’il est coché
Comportement attendu :
1. Lorsqu’un utilisateur entre un texte et clique sur Ajouter : Le nom complet
est ajouté à la liste affichée
2. Chaque ligne de la liste contient :
Une Checkbox pour indiquer si l’élément est sélectionné
Un bouton de suppression : Si la Checkbox est cochée, l’élément est
supprimé, Sinon, un SnackBar indique que la sélection est requise
Exercice 4 : Application avec navigation vers plusieurs Exercices
Objectif : Créer une application Flutter qui intègre plusieurs exercices via une
interface avec onglets ou un Drawer. L’objectif est de structurer les exercices réalisés
précédemment au sein d’une application multi-écrans, tout en pratiquant :
La navigation
La gestion d’état
Les interactions utilisateur
Structure de l’application :
1.Page d’accueil principale : Écran avec simplement le texte centré : "TP5 –
Application multi-écrans Flutter"
2. 3 Exercices intégrés accessibles via Drawer ou onglets :
EX1 : Formulaire d’inscription avec confirmation (Valider / Annuler)
EX2 : Image avec likes, dislikes et liste de commentaires
EX3 : Liste dynamique avec checkbox + suppression conditionnelle
Navigation attendue :
Option 1 : Drawer de navigation
1. Un menu latéral avec les éléments :
Accueil (TP5)
EX1 – Formulaire
EX2 – Image
EX3 – Liste
Option 2 : BottomNavigationBar ou TabBar
1. Une barre de navigation en bas ou en haut, avec 4 onglets :
TP5
EX1
EX2
EX3
