DEV Community: AbdMaker-dev

Formulaire dynamique en Flutter

AbdMaker-dev — Sun, 06 Aug 2023 19:05:28 +0000

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

Faire du Flutter Comme les pro du DFB(Dakar Flutter Brigade)

AbdMaker-dev — Wed, 05 Jul 2023 21:23:26 +0000

I - Introduction

Dans ce tutoriel, je souhaite partager un petit projet Flutter que j'ai réalisé avec des étudiants que je forme au développement mobile. Je tiens à le partager car il a été bénéfique pour mes étudiants en leur permettant de comprendre la technologie Flutter. L'architecture que j'ai utilisée est le modèle MVP (Modèle-Vue-Contrôleur), qui est une architecture simple, efficace et facile à utiliser et à comprendre. Avant de commencer à coder, nous allons prendre un bref aperçu de l'architecture MVP.

II - L’architecture MVP (Modèle-Vue-Contrôleur)

Comme vous pouvez le voir sur l'image, l'architecture MVC est un modèle de conception largement utilisé dans le développement d'applications, y compris les applications mobiles. Elle divise l'application en trois composants principaux : le modèle, la vue et le contrôleur. Chaque composant a un rôle spécifique dans le fonctionnement global de l'application.

Voici une brève explication de chaque composant de l'architecture MVC :

Modèle (Model) :
Le modèle représente les données de l'application et les règles métier associées. Il gère la logique de l'application, les opérations de manipulation des données et la persistance des données. Le modèle est généralement indépendant de la vue et du contrôleur, ce qui signifie qu'il peut être réutilisé dans d'autres parties de l'application ou dans d'autres applications.

Vue (View) :
La vue est responsable de l'affichage de l'interface utilisateur (UI) de l'application. Elle présente les données au format approprié pour l'utilisateur et affiche les éléments graphiques tels que les boutons, les champs de saisie, etc. La vue est généralement passive et ne contient pas de logique métier complexe. Elle se met à jour en fonction des modifications apportées au modèle.

Contrôleur (Controller) :
Le contrôleur est responsable de la gestion des interactions entre l'utilisateur, la vue et le modèle. Il reçoit les entrées de l'utilisateur via la vue, interroge et met à jour le modèle en fonction de ces entrées, puis met à jour la vue en conséquence. Le contrôleur agit comme un médiateur entre la vue et le modèle, en veillant à ce que les deux restent synchronisés.

Très bien, après cela, je pense que nous pouvons commencer à coder notre petit projet.

III - Codons notre projet

III - 1 - Création et Structuration du projet Flutter

Pour cree un projet un projet flutter lance la commande suivant sur votre terme :

<<<== flutter create nom__du_projet ==>>>

Après avoir créé le projet en utilisant la commande précédente, j'ai organisé le dossier "lib" de la manière suivante :

Et après création des différentes composantes de mon projet voici ce que ça donne:

III - 2 - Mise en Place de l'interface de notre Application

voici à quoi ressemble l’interface de notre application :

Comme vous pouvez le constater, l'application est un jeu très simple. C'est un jeu dans lequel le joueur qui aligne ces trois objets en premier a gagné.

Si vous avez un design à intégrer, la première chose à faire est de décomposer chaque interface du design en composants indépendants. Pour notre cas, voici comment l'interface peut être décomposée :

Vu que nous utilisons un gestionnaire d'état (State Management) appelé Riverpod, chaque composant de l'interface peut être codé de manière indépendante. Cela signifie que nous ne sommes pas obligés de regrouper tout le code de chaque composant dans la même page. Au lieu de cela, nous pouvons les coder séparément et les appeler dans la page de l'interface.

III - 2 - 1 - En tête

Et voici le code de l'en tête

III - 2 - 2 - Les information des joueurs

Et voici le code pour afficher les informations des joueurs :

Si vous avez remarqué, dans le code des informations des joueurs, j'ai fait appel à un autre composant appelé PlayerWidget. J'ai utilisé ce composant pour éviter la redondance du code qui affiche l'icône et le nom d'utilisateur des joueurs.

Voici le code du composant PlayerWidget :

III - 2 - 3 - Le Jeux

Voici le code du jeux

Si vous avez remarqué, j'ai également fait appel à un autre composant appelé ItemGame que j'ai créé afin de ne pas regrouper tout le code dans le même fichier. Voici le code de ItemGame :

III - 2 - 4 - Le Bouton

Voici le code du bouton

*III - 2 - 4 - Appels de tous les Composants sur l’interface *

Et ainsi, nous obtenons l'interface de notre application.

Si vous êtes intéressés à voir le reste de l'application et à obtenir de l'assistance pour le développement de vos applications, veuillez nous contacter :

Email : aliounebadaradiouf7@gmail.com

LinkedIn : https://www.linkedin.com/in/alioune-badara-diouf-b82245192/