Créer des champs dynamiques dans FlutterFlow : votre itinéraire jour par jour en un clic !

Qui n’a jamais rêvé de pouvoir générer, en quelques secondes, un planning sur-mesure pour chaque jour d’une aventure épique via une interface totalement no-code ? Aujourd’hui, plongeons du côté de la communauté FlutterFlow pour découvrir comment concevoir un formulaire qui s’adapte à vos besoins, avec un système malin d’ajout et de suppression de jours — parfait pour tout administrateur qui rêve d’automatiser la création d’itinéraires ! C’est parti pour un tour d’horizon plein de widgets, d’astuces utilisateur et d’une pointe de fun.

Pourquoi vouloir des champs dynamiques dans FlutterFlow ?

Imaginez que vous êtes responsable d’un site de voyages, et qu’à chaque nouvelle expédition, les étapes changent. Un client veut parfois un séjour de trois jours à la plage, un autre préfère neuf jours à explorer le monde. Impossible de prévoir à l’avance combien de fiches d’étape il faut afficher !

C’est là qu’entrent en jeu les fameux « enfants dynamiques » dans la structure FlutterFlow : des champs qui se créent, se dupliquent, se déplacent et se suppriment au rythme de vos envies (ou de celles du client). Tout ça en restant proprement indexé, bien sûr !

À quoi ressemble le problème dans FlutterFlow Community ?

Sur le forum FlutterFlow Community, un utilisateur expose sa problématique : il souhaite développer une vue administrateur permettant de créer un itinéraire, avec un bouton « Ajouter un jour ». À chaque clic, un nouveau set de champs (Titre et Description) s’ajoute en respectant le numéro du jour (day number), et pour ne rien gâcher, il faut pouvoir supprimer un jour existant d’un simple tap sur une croix rouge. Le souci ? Des erreurs récurrentes quand il utilise une Column pour générer dynamiquement ses champs !

Vous aussi, vous avez cet écran en tête où chaque ligne correspond à un jour, avec l’intitulé « Jour 1 », « Jour 2 », etc., et l’envie d’en ajouter ou d’en retirer, en fonction de l’inspiration. Espérons qu’il n’y ait pas besoin d’un « Jour 472 : Sieste sur la plage » !

FlutterFlow : les bases de la génération de champs dynamiques

FlutterFlow se base sur une logique simple mais puissante : associant des widgets et des listes, il est possible de gérer des éléments dont le nombre varie en temps réel. Pour cela, on adopte une structure en ListView ou Column, reliée à une liste d’objets (dans ce cas précis, chaque objet représente une journée).

Exemple de data-model pour l’itinéraire

List days = [
  {'day': 1, 'title': '', 'description': ''},
  {'day': 2, 'title': '', 'description': ''},
];

À chaque fois que l’admin clique sur « Ajouter un jour » (AddDay), un nouvel objet s’ajoute à la liste, et inversement avec la croix de suppression. Facile, non ?

Comment ajouter dynamiquement un jour (et ses champs) dans le formulaire

Bouton « Ajouter un jour » : Attachez un événement sur le bouton pour ajouter une nouvelle entrée dans votre liste.
Affichage automatique de tous les jours (avec titres/desc) via un ListView/Column en boucle sur la liste.
Gestion de l’index : À chaque redessine, le numéro du jour correspond à son index + 1 pour garder un affichage clair.

Petite astuce : l’affichage malin du numéro de jour

Bien penser à afficher le numéro du jour dynamiquement, au lieu d’un champ statique ou d’un calcul hasardeux !

Text('Jour ${index + 1}')

Le casse-tête des suppressions… et comment le résoudre

Impossible d’envisager une solution sans prévoir la suppression d’une journée par erreur ou par changement d’avis ! Chaque entrée doit être accompagnée d’un bouton (souvent une icône de croix rouge) pour supprimer le jour associé.

Sur le bouton, ajoutez une fonction qui retire l’élément de la liste basé sur son index.
Le widget parent se met à jour automatiquement pour enlever la bonne ligne.
Re-indexez les jours pour éviter de finir avec un « Jour 1, Jour 2, Jour 5 ! » (ou pire, un « Jour 0 »)

Extrait de code

onTap: () {
  setState(() {
    days.removeAt(index);
    // Optionnel : re-calculer les labels de jours
  });
},

L’erreur classique : les TextField qui refusent d’obéir !

Un problème fréquent revient dans les questions de la communauté : quand on génère dynamiquement des TextField dans FlutterFlow, les valeurs peuvent se perdre lors de l’ajout/suppression de lignes. Parfois, le focus ne suit pas, ou pire, la donnée initiale saute par-dessus bord !

Comment éviter ces désagréments ?

Stocker la valeur à la volée dans votre objet ‘day’ à chaque modification via le contrôleur ou le callback onChanged.
Éviter d’utiliser des variables globales pour les contrôleurs de TextField : on préfère une gestion au sein du même scope (par exemple, dans la classe State du widget).

Sinon, on risque de se retrouver avec tous les titres sur « Jour 2 », et toutes les descriptions sur « Sieste collective » !

Une structure de widget optimisée : l’exemple du widget tree pour FlutterFlow

Pour éviter de transformer votre arbre-widget en forêt impénétrable, le bon schéma ressemble à ceci :

Column
│
├── ListView.builder (pour chaque jour)
│   ├── Row
│   │   ├── Text('Jour X')
│   │   ├── TextField (Titre)
│   │   ├── TextField (Description)
│   │   └── IconButton (Supprimer)
│
└── FloatingActionButton (Ajouter un jour)

Le plus : chaque fois qu’un changement est effectué, le widget principal redessine l’ensemble, maintenant la synchronisation parfaite.

Les outils et ressources pour aller plus loin avec FlutterFlow

Vous êtes en quête de plus d’astuces pour FlutterFlow, ou de solutions à vos questions tordues sur le formulaire dynamique parfait ? Bonne nouvelle, la communauté FlutterFlow est hyper active et partage énormément de snapshots, d’extraits de code, et même des tutos maison sur la gestion dynamique des widgets.

Forum de la communauté FlutterFlow : Créer un formulaire dynamique jour par jour (source)
Documentation FlutterFlow : Une bible à garder sous le coude quand vous butez sur une configuration !

Les erreurs à éviter en générant des champs enfants dynamiquement

Oublier de re-indexer les jours après suppression (oui, c’est tentant d’ignorer le pauvre Jour 4 effacé…)
Ne pas sauvegarder les données à chaque modification, provoquant la perte d’informations à la moindre mise à jour.
Ignorer le focus des TextField : si votre formulaire compte 30 jours, évitez d’envoyer le curseur vers le triangle des Bermudes à chaque ajout !

L’approche FlutterFlow rendue simple (et fun) grâce à la communauté

L’un des avantages à utiliser FlutterFlow, c’est la rapidité pour construire, tester, casser, et… reconstruire des formulaires complexes, sans une ligne de code monumentale. Grâce aux retours de la communauté, chaque piège devient une nouvelle opportunité d’apprendre.

Prêt à révolutionner la création d’itinéraires ou de tout autre formulaire adaptatif ? N’ayez pas peur de tester, d’itérer, et, surtout, de solliciter la communauté FlutterFlow quand un bug tente de saborder votre widget préféré !

En espérant que ce petit guide vous aidera à garder la main sur vos champs dynamiques et à offrir à vos utilisateurs (ou vos admins) le super-pouvoir d’un formulaire qui s’adapte à toutes les envies, du plus court séjour à l’aventure marathon.

Maintenant, à vos claviers : si vous croisez un « Jour 42 : Remplir son planning en un clic », vous saurez comment faire !

Source : Créer des champs dynamiques dans FlutterFlow : votre itinéraire jour par jour en un clic !