Comment transférer un fichier uploadé d’une page à l’autre dans FlutterFlow… sans crise de nerfs !

Le casse-tête du transfert de fichiers dans FlutterFlow

Vous développez sur FlutterFlow et vous venez de réussir à faire uploader un fichier par l’utilisateur… Champagne ! Mais voilà : dès qu’il s’agit d’enchaîner sur une seconde page, la bouteille se transforme en aspirine. Comment passer ce précieux fichier d’une page à une autre sans tout casser ? Allez, on fait le point, humour et astuces incluses !

Pourquoi ce problème survient-il dans FlutterFlow ?

On pourrait penser qu’un simple drag & drop de variable suffirait. Mais FlutterFlow distingue app state (global) et page state (local). Bonne nouvelle : pour la page, on peut stocker un fichier de type « UploadedFile » en variable d’état. Mauvaise nouvelle : impossible d’en faire autant au niveau de toute l’application. Résultat, pas de passeport universel pour le fichier d’une page à l’autre !

Les solutions classiques… et leurs limites !

1. Passer le fichier en paramètre à la nouvelle page

C’est l’approche la plus intuitive : dès qu’on change de page, on transmet le fichier comme argument.
Mais avec de gros fichiers, c’est la crise de panique assurée. Sur FlutterFlow Web, le contenu complet du fichier transite par l’URL. Oui, vous lisez bien : VOTRE image d’anniversaire en base64 dans la barre d’adresse, et autant dire que votre navigateur et vos utilisateurs risquent d’exploser en vol…

2. Utiliser un stockage externe

On peut penser à uploader le fichier sur un storage (genre Firebase ou autre), puis le récupérer sur la deuxième page. Problème : cela suppose une connexion internet… et si on veut un fonctionnement 100% offline, c’est mort.
En plus, pour de gros fichiers, cela ajoute une latence dingue. Imaginez le trajet Paris-Nice avec 77 escales, sauf que vous ne bougez jamais de votre canapé…

3. Stocker dans le state global ? Impossible officiellement

Oui, tenter de stocker un « UploadedFile » dans l’App State ferait planter FlutterFlow plus vite qu’un ordi sous Windows 98.

Les (vraies) stratégies de contournement

Utiliser les variables globales Custom

Si vous êtes un peu bidouilleur, vous pouvez ruser. Dans FlutterFlow, rien n’empêche de créer une variable globale de type String (ou Uint8List via un custom code). En stockant le contenu du fichier en base64, hop ! ça devient une chaîne de caractères. Sur la deuxième page, vous décodez la chaîne.
Alors oui, ce n’est pas hyper propre pour des fichiers énormes, mais c’est parfois la seule option offline.

Exemple rapide :

Sur la première page : vous lisez le fichier et l’encodez en base64.
Vous stockez la string dans une variable globale (App State).
Sur la deuxième page : vous récupérez la string, la décodez et l’affichez ou l’utilisez comme bon vous semble.

Astuce : Vous pouvez aller encore plus loin avec des packages custom Flutter intégrés dans FlutterFlow pour manipuler le type Uint8List ou carrément enregistrer le fichier dans le stockage local du device (genre shared_preferences).

Passer un pointeur ou un identifiant, jamais le fichier lui-même !

Si possible, plutôt que de passer tout le fichier, stockez-le localement sur l’appareil (dans un dossier temporaire), puis passez juste son chemin d’accès (le path) entre vos pages. Cela évite de surcharger le state ou la mémoire.

Ceci permet aussi de rester 100% offline, et c’est beaucoup plus efficace. Au passage, on évite d’avoir une URL 12 kilomètres de long !

Et pour les utilisateurs avertis : le Custom Action

Vous êtes allergique aux limites de FlutterFlow ? Vous pouvez créer votre propre custom action en Dart pour manipuler les fichiers entre pages. Cela demande un peu de code, mais c’est la flexibilité ultime : stockage local, compression, vérification de fichier…

Il existe une documentation assez riche sur FlutterFlow et la communauté est pleine d’astuces (et probablement de gifs de chats pour se motiver dans les moments difficiles).

Les erreurs à éviter absolument

Passer tout le fichier dans une URL en web : horreur absolue, crash assuré. Sauf si vous êtes payé au nombre de caractères générés.
Espérer que FlutterFlow gère magiquement les fichiers entre pages sans rien faire : non, il va juste se retrouver perdu comme votre chat sur Excel.
Oublier la gestion offline : tout le monde n’a pas la fibre 24/24, surtout en pleine campagne…

Petit tableau récap’ malin

Ce que dit la communauté FlutterFlow

Comme souvent avec FlutterFlow, la solution miracle n’existe pas, surtout si vous refusez le cloud. Certains passent par le stockage temporaire, d’autres jonglent avec le base64… Finalement, la meilleure approche est d’expérimenter et surtout, de tester avec de vrais gros fichiers pour ne pas découvrir les soucis le jour du déploiement !

Besoin d’automatiser tout ça ?

Si vous aimez simplifier les process de upload et de transmission de fichiers sur vos applis, n’oubliez pas d’explorer les outils d’automatisation et de no-code comme Make (ex-integromat) qui peuvent faire des merveilles pour connecter, stocker, et manipuler vos fichiers entre services sans lever le petit doigt !

Ce qu’il faut retenir (et souffler un peu)

Passer un fichier d’une page à l’autre dans FlutterFlow, ce n’est pas aussi simple que de draguer sur Tinder, mais ce n’est pas non plus mission impossible. À vous de choisir la stratégie la mieux adaptée à votre app (et à votre patience). Variable globale custom, stockage local, custom actions : tout dépend de vos besoins d’efficacité et… de votre niveau de caffeine dans le sang !

Pensez à tester vos flux avec différents réseaux, tailles de fichiers et plates-formes (mobile, web). Et surtout, respirez, la communauté FlutterFlow regorge de Jedi prêts à filer un coup de main sur les forums !

Et vous, comment avez-vous réussi à faire passer ce fichu fichier d’une page à l’autre ? Racontez vos galères : il paraît que ça aide à déstresser !

Source : Comment transférer un fichier uploadé d’une page à l’autre dans FlutterFlow… sans crise de nerfs !