DEV Community

Cover image for Formulaire dynamique en Flutter
AbdMaker-dev
AbdMaker-dev

Posted on

Formulaire dynamique en Flutter

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

Image description

- PAGE INSCRIPTION

Image description

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 :

Image description

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:**

Image description

Appel de **AuthTemplatePage Dans la Page Inscription:**

Image description

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 :

Image description

Une fois que tous est en place nous obtenons ce résultat dans nos deux pages.

Image description

Image description

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 :

Image description

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 :

Image description

Et tout en bas déclarons deux tableaux de DynamicInputModel qui vont contenir les champs des formulaires d’inscription et de connexion.

Image description

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 :

Image description

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

Image description

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 *

Image description

*Pour la page Inscription *

Image description

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

Image description

Image description

Donc, avec cela, nous venons d'obtenir les pages d'inscription et de connexion avec des formulaires dynamiques, bien validés.

Image description

Image description

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)