Atelier Framework Cross Plateforme Atelier 3
Atelier 3 :
Les Formulaires
Objectifs:
être capable de créer , valider et récupérer les données depuis un
formulaire avec Flutter
I. Présentation:
On vous propose de concevoir un premier formulaire permettant la saisie d’un
nouveau article (produit)
Le formulaire doit contenir les informations suivantes :
1. les informations d’un article : code(numérique), Libelle(texte), Quantité
(numérique:réel)
2. Un Bouton Ajouter et un bouton initialiser le formulaire
3. Ajout d’un widget pour spécifier la catégorie de produit : on suppose
que les catégories disponible sont les suivantes :
a) Ordinateur de bureau
b) Ordinateur portatif
c) SmartPhone
d) Imprimante Laser
4. Indiquer si le produit est disponible ou en cours de commande.
radiobutton
5. Ajouter le type de ventre de l’article : sur place , vente en ligne
1 sur 5
Atelier Framework Cross Plateforme Atelier 3
1. Création des zones de texte : TextFormField
code :
Figure 01
NB :
pour les valeurs numériques, on peut utiliser :
[Link]( digital, signed )
inputFormatters: [[Link]],
2. Les boutons :
Utilisation de bouton ElevatedButton :
Figure 03
3. vous remarquez que le code est devenu très long rapidement , on vous
d’ordonner votre code afin qu’il devient plus facile a comprendre et à
maintenir.
Pour cela, on vous propose de créer une classe contenant un ensemble de
méthode et chaque méthode permet d’insérer un élément (widget) de
l’interface conçue.
2 sur 5
Atelier Framework Cross Plateforme Atelier 3
[Link] on va passer à la validation des valeurs des informations :
on suppose que le code de l’article doit être compris entre 100 et 1000
Le libelle de l’article à une longueur max de 15 caractères
La quantité doit être supérieur à 0.
la validation de contenu des widgets se fait en deux étapes :
Étape 1 :
implémenter la méthode validator : (value) pour chaque widget.
Ajouter la logique nécessaire pour valider le contenu de widget
cette méthode retourne :
null : dans le cas de succès
String : contenant le message d’erreur
Étape 2 :
Lors du click sur le bouton, onPressed():{ } implémenter votre logique
de validation.
Normalement il faudra valider tous les widgets dans l’état courant :
la méthode [Link]() appel automatiquement les
différent validator pour chaque widget , et retourne 1 dans le cas de
succès, 0 sinon.
Attention :
pour pouvoir récupérer les états stateForm vous devez obligatoirement
utiliser un key pour identifier le form . il permet par la suite d’accéder aux
différentes valeurs des widget, valider, initialiser et enregistrer leurs contenus
Ainsi, li faut ajouter dans la classe qui implémente votre form :
et le transmettre au formulaire créer grâce a l’attribut key : keyform
5. une fois que le formulaire( contenant pour le moment les EditText) est
validé, on passe à l’implantation de la méthode Onsaved (value) , de chaque
élément du formulaire.
La méthode onSaved, permet de récupérer les informations validés et
de les transmettre vers un script pour les sauvegarder dans une base
de données par exemple
3 sur 5
Atelier Framework Cross Plateforme Atelier 3
Dans notre, on vous propose de développer la classe Article comme
étant un modèle ORM :
Créer une classe comme étant un modèle ORM permettant de
manipuler un article
6. implémenter le trigger, pour faire appel aux différentes méthode onsaved de
chaque objet du formulaire : [Link]()
7. Implémentation des cases à cocher :
Les cases à cocher sont de deux types : CheckBox et CheckBoxListTile
a) implémenter des cases à cocher pour représenter le type de vente d’un
article : sur place , vente en ligne
b) refaire le même travail avec les widget CheckBoxListTile
c) valider les boutons checkBox !!!!
8. validation des checkBox :
Les widgets de type checkbox n’ont pas un Etat, pour sauvegarder l’état de la
case a cocher. C’est pour ca qu’on doit ajouter le widget FormField
Le Widget FormField : permet de maintenir l’état d’un widget qui ne dispose
pas d’un état state
a)
implémentation
de FormField
4 sur 5
Atelier Framework Cross Plateforme Atelier 3
b) ajouter un widget pour afficher le message d’erreur :
[Link] : permet de vérifier si il existe une erreur dans l’état
courant
[Link](context).errorColor : récupérer le thème utiliser par défaut
pour afficher les messages d’erreur ( en rouge par défaut)
c) ajout du validator :
=> il ne faut pas oublié d’ajouter la méthode Onsaved : pour sauvegarder la
valeur final du widget
9. Radio :
on souhaite insèrer deux bouton radio pour indiquer si le produit est disponible
ou bien sur commande.
On vous propose d’utiliser
9.1. radio bouton simple
9.2 RadioListTile
10. DropDowButton :
implémenter une liste permettant de sélectionner la catégorie de l’article à ajouter
5 sur 5
