Quand tes Custom Dialogs dans FlutterFlow font grève
Si tu développes sur FlutterFlow, tu as peut-être déjà vécu cette étrange sensation : tout ton workflow fonctionne… sauf ce maudit custom dialog qui décide de bouder au moment où tu en as le plus besoin ! Pas de panique, tu es loin d’être seul : la communauté FlutterFlow s’arrache aussi les cheveux sur ce sujet, comme en témoigne ce fil récemment très actif ! Plongeons ensemble au cœur des petits caprices des custom dialogs, et voyons comment les apprivoiser.
Problème : Pourquoi mon Custom Dialog ne s’affiche-t-il pas ?
Tu as passé du temps à créer un joli loader en Lottie, une pop-up élégante que tu veux afficher au milieux d’un workflow bien huilé. Tu as même pensé à l’ouverture non bloquante, puis finalement tu l’as désactivée. Mais rien à faire : ton custom dialog refuse de s’afficher, alors que le reste de tes actions fonctionnent parfaitement. Cerise sur le gâteau, même une action basique comme l’update d’un app state ne veut plus jouer le jeu !
C’est exactement la mésaventure racontée sur la communauté FlutterFlow et qui donne envie de crier « Mais POURQUOI ?! » devant son écran.
Comprendre le comportement du workflow dans FlutterFlow
Un peu de mécanique interne (sans la sueur)
FlutterFlow fonctionne avec une logique de workflow orchestrée : chaque action attend que la précédente soit terminée. Mais certains éléments – et notamment les dialogs et bottom sheets – ont des comportements asynchrones ou bloquants/non bloquants. Quand un custom dialog ne s’affiche pas :
- Soit il est « appelé » dans un contexte déjà chargé, donc écrasé ou masqué.
- Soit il est mis dans une branche de workflow pas encore terminée, ou terminée trop tôt.
Bloquant ou non bloquant : le dilemme du développeur
Le paramètre « non bloquant » permet de lancer la pop-up sans attendre que l’utilisateur ait interagi avec elle. Pratique quand tu veux montrer un loader par exemple ! MAIS, cela peut aussi faire avancer le workflow sans attendre que la pop-up soit visible… Résultat : ta pop-up passe tellement vite qu’on ne la voit même pas !
Coincé ? Vérifie l’ordre et le contexte !
Un custom dialog, en plein milieu d’un workflow, peut se retrouver « zappé » si une précédente action est toujours en cours ou si le workflow part ailleurs (bottom sheet, navigation, etc.). Donc :
- Vérifie que tu n’enchaînes pas navigation, custom dialog, puis un autre changement d’état sans leur laisser le temps de respirer.
- Mets des pauses (actions « Wait »), ça t’évitera le syndrome du passage-éclair.
Les erreurs classiques qui font disparaître ton dialog
1. Mauvais emplacement dans le workflow
Placer l’action d’ouverture du dialog après une navigation ou juste avant une fermeture de page, c’est l’assurance de ne rien voir du tout. Imagine tu ouvres la porte, mais la pièce s’écroule : pas de pièce, pas de dialog !
2. Concurrence des overlays : bottom sheets vs custom dialogs
Sur FlutterFlow, overlays (dialogs, bottom sheets) ne cohabitent pas toujours bien. Si tu t’amuses à en déclencher deux à la suite, il se peut qu’un seul survive à la bataille.
3. Variable d’état non liée correctement
Dans l’exemple remonté à la communauté, même un « update app state » ne fonctionnait pas. Souvent, ça vient des bindings de variables, pas mis à jour ou pas reliés à un widget dans l’arbre. Ton variable est toute seule dans son coin, elle boude aussi.
4. Actions asynchrones non attendues
Si tu appelles des actions qui demandent du temps (appels API, animation, etc.) sans les attendre, tu crées un mini bug temporel : ton dialog passe avant que tout soit prêt.
Comment débuguer efficacement tes Custom Dialogs FlutterFlow
Étape #1 : Simplifie le workflow
Retire tout sauf l’action d’ouverture du custom dialog. Vois si ça marche. Si oui, ajoute les étapes une par une : tu trouveras la coupable.
Étape #2 : Joue avec « non bloquant »
Testes la différence entre bloquant/non bloquant pour bien visualiser le comportement. Si le dialog n’apparaît qu’en « bloquant », c’est que ton workflow part trop vite sans l’attendre.
Étape #3 : Utilise les Rolls Royce des logs
Ajoute des actions « print » ou « snackbar » à différentes étapes pour voir où le workflow cale : c’est comme un contrôle technique de ta logique.
Étape #4 : Priorité à la lisibilité
N’hésite pas à faire des workflows plus courts, avec des « fin de workflow » bien identifiés. Parfois, multiplier les « si » et les branches déphase l’enchaînement des actions.
Les bonnes pratiques à adopter pour un workflow sans prise de tête
- Prévois tes overlays à l’avance : pas de bottom sheet et dialog au même moment. C’est comme inviter deux DJs à mixer sur la même platine : le bruit n’est pas garanti (et le résultat non plus…)
- Relis l’ordre des actions : une navigation qui recharge la page ou change l’arbre DOM = adieu dialog.
- Teste avec et sans wait/pause : une action « Wait » de 200ms peut parfois faire toute la différence, si tu sens que FlutterFlow va trop vite.
- Binding propre des variables d’état : assure-toi que chaque variable utilisée dans tes dialogs est bien attachée à un widget et à jour.
En cas de galère ultime : les ressources pour t’en sortir
- Documentation officielle FlutterFlow : la bible, forcément. Mais parfois un peu aride.
- Forum de la communauté FlutterFlow : l’endroit où poser toutes tes questions, même les plus farfelues (crois-moi, tu ne seras jamais le premier à avoir ce bug).
- Tutoriels vidéo YouTube : rien ne vaut un bon tuto visuel pour voir un développeur maniaque cliquer 42 fois mais réussir à afficher LA popup.
Un workflow qui flow, c’est possible !
Retiens surtout ceci : la logique derrière les custom dialogs FlutterFlow n’est pas magique, mais elle demande un peu de méthode. Réfléchis à l’ordre, à la concurrence entre overlays, et pense « asynchrone ». Comme dans la vraie vie, tout est question de timing !
La prochaine fois que ton custom dialog refuse de s’afficher, imagine-le juste faire un petit caprice… ou se mettre en grève. Avec les bons ajustements, il reprendra vite du service et mettra la cerise sur le gâteau de tes apps FlutterFlow.
N’hésite pas à partager, commenter et raconter tes propres galères (et victoires !) avec les dialogs. La communauté adore les anecdotes croustillantes, surtout quand elles se terminent par un écran qui fonctionne enfin !
Source : Custom Dialog FlutterFlow qui ne s’affiche pas ? Les secrets d’une popup capricieuse révélés !