Ajouter une photo de profil dans une app FlutterFlow avec Firebase (sans coder)

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 :

1. Avoir un projet FlutterFlow connecté à Firebase
2. Avoir activé Firestore, Authentication et Storage sur Firebase
3. 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 :

1. Va dans l’onglet Actions > On Tap
2. Sélectionne Upload Media
3. Source : Galerie, Caméra ou les deux
4. Type : Firebase
5. 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 !

1. Ajoute une action Update Document
2. Document : Authenticated User
3. Champ à mettre à jour : photoUrl
4. 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 :

1. Crée une Condition avant l’upload
2. Si AuthenticatedUser.photoUrl est défini → supprime le fichier correspondant
3. 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.