Formulaire dynamique en Flutter
Tags: flutter, form
Published: 2023-08-06 19:05:28

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sz1xfn51fgr64dmakhue.png)


**- PAGE INSCRIPTION**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nucyowh6obmijl3helwx.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97jwgxksfgofu38jwbuy.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/189ivh3ga8ku204x9nfc.png)


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apwbl7iwzzjkjgc50cq6.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wamdfkbee8gn1wyfkxro.png)

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



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ns6y71849qz2ctnwp4tb.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0evfiddtg78pyustp7p7.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wuyx7gyba2gzf9lnnxzf.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iurxvsgrfwkifyxv9io6.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5mlslg7m35r5lluxclm.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sw2wywit962xrz14drzd.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jac11mzc283n882iq8n.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2j7igspodk1pdivrzt4.png)

**Pour la page Inscription **

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0awjzigoc9wv2kxnmhov.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvax8p91v2x89apbupsa.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dw2e840sqwjoz9wy15tu.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n74ne56qhx2s68i47oas.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9crk46hsn11ek7rsznc.png)

**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 🙏.