Quand on crée une application mobile, permettre aux utilisateurs d’ajouter une photo de profil est une fonctionnalité quasi incontournable. Dans ce tutoriel, je t’explique pas à pas comment mettre en place cette fonctionnalité dans FlutterFlow en utilisant Firebase Storage, et surtout, sans écrire une seule ligne de code.
Pourquoi utiliser Firebase Storage ?
FlutterFlow est un outil no-code ultra puissant pour créer des apps. Pour gérer des fichiers comme les photos de profil, FlutterFlow s’appuie sur Firebase Storage.
Ce service cloud te permet de :
- Stocker des fichiers (photos, vidéos, etc.)
- Obtenir une URL d’accès à ces fichiers
- Gérer les droits d’accès avec des règles de sécurité
🛠️ Prérequis avant de commencer
Avant d’implémenter la fonctionnalité, tu dois :
- Avoir un projet FlutterFlow connecté à Firebase
- Avoir activé Firestore, Authentication et Storage sur Firebase
- Passer sur le plan Blaze (gratuit jusqu’à certains quotas)
🔗 Si tu ne sais pas connecter Firebase à FlutterFlow, je t’invite à lire ou regarder [mon tuto complet ici].
🧑🎨 Étape 1 : Ajouter le champ “photo” dans l’écran de profil
Dans un écran “Edit Profile”, tu as sûrement déjà :
- Le nom
- Le numéro de téléphone
- La ville
On va maintenant :
- Réactiver ou ajouter un widget image ronde
- Faire en sorte que ce widget soit cliquable
📤 Étape 2 : Ajouter une action “Upload Media”
Sur le widget image :
- Va dans l’onglet Actions > On Tap
- Sélectionne Upload Media
- Source : Galerie, Caméra ou les deux
- Type : Firebase
- Active la Snackbar pour afficher un message pendant le chargement
Cette action permet d’envoyer l’image sélectionnée dans Firebase Storage.
🔗 Étape 3 : Rattacher l’image à l’utilisateur
C’est bien de stocker la photo, mais maintenant il faut que ton utilisateur y ait accès !
- Ajoute une action Update Document
- Document : Authenticated User
- Champ à mettre à jour : photoUrl
- Valeur : l’URL de l’image uploadée (disponible juste après l’action Upload)
Et voilà, l’URL est maintenant enregistrée dans Firestore.
🧽 Étape 4 : Supprimer l’ancienne photo (important !)
Par défaut, chaque nouvelle photo uploadée s’ajoute. Résultat : ton Firebase Storage se remplit inutilement, ce qui peut te coûter cher.
Pour éviter ça :
- Crée une Condition avant l’upload
- Si
AuthenticatedUser.photoUrlest défini → supprime le fichier correspondant - Puis continue avec l’upload et la mise à jour
Cela garantit qu’une seule photo par utilisateur est conservée à tout moment.
✅ Résultat final
- Tu peux uploader une photo depuis la galerie ou la caméra
- L’image est stockée dans Firebase
- Elle est liée à l’utilisateur
- Les anciennes images sont automatiquement supprimées
Une fonctionnalité clean, efficace et 100 % no-code !
🧠 À retenir
L’upload de photo de profil peut paraître simple, mais il implique :
- De la gestion de fichiers (upload, suppression)
- Des mises à jour de Firestore
- Des règles de sécurité Firebase Storage
FlutterFlow permet de faire tout ça sans coder, à condition d’avoir la bonne logique.
📲 Tu veux aller plus loin ?
Je suis Franco, développeur et product builder. J’accompagne des entrepreneurs qui ne savent pas coder à créer eux-mêmes leur V1 d’application mobile.
