I-) Introduction
Bonjour les super-héros du développement mobile !
Nous voilà de retour avec un nouveau tutoriel dans lequel nous allons voir comment générer dynamiquement des formulaires en Flutter.
Vous travaillez sur un projet flutter dans le quel a un certain moment le continu des formulaires doit être définis par le Back-End du projet et vous ne savais pas comment s’y prendre😩😩😭😭!!!!! Donc ce Tuto est pour toi👍🏾.
Pour mettre en pratique cette génération des formulaires en Flutter, nous allons essayer de réaliser les pages de connexion et d'inscription d'une application. Avant de commencer, je vous montre les images des deux pages (connexion et inscription) que nous allons créer ensemble.
- PAGE CONNEXION
- PAGE INSCRIPTION
II-) Integration des maquettes
Si vous aveZ regardé attentivement les deux images précédentes, vous allez constater que la page de connexion et d'inscription sont quasiment identiques. Elles ont le même agencement de base, les mêmes couleurs, etc.
Les différences entre ces pages résident dans les textes affichés et le nombre de champs de saisie (Input Fields) dans les formulaires. Afin d'éviter toute redondance dans le code, c'est-à-dire de coder deux ou plusieurs fois la même chose, je vous propose de créer un widget (composant) qui définira la structure et la mise en forme de la page que nous appellerons AuthTemplatePage. Et ce dernier va avoir 3 propriétés qui sont :
pageTitle (String) : qui prend le titre de page où AuthTemplatePage est appelé. Exemple CONNEXION ou INSCRIPTION
content (Widget) : qui prend le contenu de la page plus précisément les formulaires de connexion et d’inscription.
fleatingBnt (Widget) : qui prend le bouton qui est complètement en bas à droite des pages connexion et inscription.
Voici le code de AuthTemplatePage :
Maintenant que le widget qui défini la form de nos page est créée nous allons juste l’appeler dans la page Connexion et Inscription successivement.
Appel de **AuthTemplatePage Dans la Page Connexion:**
Appel de **AuthTemplatePage Dans la Page Inscription:**
Après avoir regardé c’est deux images vous allez me demander c’est quoi le widget RedirectFloatingBtn que nous voyons dans le code de nos deux pages?
Hé bien c’est rien d’autre que le code du bouton de redirection qui est en bas à droite. Et ce bouton nous permet de naviguer entre les pages Connexion et Inscription.
Voici le code de RedirectFloatingBtn :
Une fois que tous est en place nous obtenons ce résultat dans nos deux pages.
Maintenant que nous avons nos deux pages il est grand temps maintenant de passer aux choses sérieuses.😎😎😎😉 GÉNÉRER DYNAMIQUEMENT DES FORMULAIRES.
III -) Formulaire dynamique
Pour commencer nous devons d’abord mettre en place nôtre template de champ de saisie(Input Field) que nous appelleront DynamicInput
Le code de DynamicInput :
Après cela il nous faut un modèle(Une Classe Dart) dont les attributs de classe vont être presque les mêmes que celle qui sont dans le DynamicInput. Et nous appellerons ce modèle DynamicInputModel
Le code de DynamicInputModel :
Et tout en bas déclarons deux tableaux de DynamicInputModel qui vont contenir les champs des formulaires d’inscription et de connexion.
Après ça la prochaine étape vas être la définition des différentes types de validations des champs de saisie(Text, Email, Number etc...) des formulaires. Pour cela nous mettons en place la classe FormValidator.
Le code de FormValidator :
Et pour conclure cette partie, nous avons ajouté en bas de cette classe une petite fonction getValidator qui renvoie la validation.
Et voici le code de la fonction getValidator
Après cela, nous revenons enfin sur nos deux pages "Connexion" et "Inscription" pour afficher les formulaires de connexion et d'inscription.
*Pour la page Connexion *
*Pour la page Inscription *
NB: Si vous avez bien regardé, j'ai utilisé une boucle for pour parcourir les tableaux loginForm et signUpForm, qui sont des tableaux ou des listes de DynamicInputModel. À chaque position i de la boucle, je crée un nouveau widget DynamicInput en passant tous les paramètres. 😍😍😍😍😍 TRÈS SIMPLE, N'EST-CE PAS ? 😍😍😍😍😍
Voici le code complet de la Page Connexion et Inscription
Donc, avec cela, nous venons d'obtenir les pages d'inscription et de connexion avec des formulaires dynamiques, bien validés.
Conclusion
Les formulaires dynamiques peuvent être un peu compliqués à réaliser parfois, mais avec une bonne approche et une bonne séparation du code, on peut simplifier la complexité des formulaires dynamiques. Dans ce tutoriel, vous avez tout le nécessaire pour créer des formulaires dynamiques adaptés à vos besoins. Merci 🙏.
Top comments (0)