🛠️ Créer une page d’édition de profil dans FlutterFlow (avec Firebase)

https://youtu.be/u2w4s5QLuuk

La plupart des applications mobiles permettent à l’utilisateur de modifier ses informations personnelles. Dans cet article, je te montre comment créer une page “Modifier Profil” dans FlutterFlow, connectée à Firebase.
Un tuto essentiel si tu veux construire une app complète et professionnelle.

---

👋 Introduction

Avant de plonger dans le tuto, je me présente rapidement :
Je m’appelle Franco Muoio, je suis Product Builder depuis 7 ans.
J’accompagne des entrepreneurs sans compétence technique à créer et publier leur application grâce à des outils no-code comme FlutterFlow.
Aujourd’hui, on va voir comment construire une page Edit Profile propre et fonctionnelle, étape par étape.

---

⚙️ Prérequis

Pour suivre ce tutoriel, tu dois :

• Avoir un projet FlutterFlow créé
• Avoir un projet Firebase connecté à FlutterFlow
• Avoir configuré l’authentification Firebase
• Utiliser Firestore comme base de données

Si ce n’est pas encore fait, j’ai publié une vidéo dédiée à la configuration de Firebase que je te conseille de regarder en premier.

---

🧱 Étape 1 — Créer la page “Edit Profile”

Dans FlutterFlow, commence par ajouter une nouvelle page à ton app.
Tu peux partir d’un template existant comme Create Edit.

1. Crée une nouvelle page nommée Edit Profile
2. Donne-lui un titre clair (ex. : “Modifier Profil”)
3. Supprime ou cache l’image de profil si ce n’est pas ton focus
4. Conserve les TextFields suivants :
   • Nom (Your Name)
   • Téléphone (Your Phone Number)
   • Ville (City)
   • État (State, sous forme de Dropdown)
   • Biographie (Description)

---

🔎 Étape 2 — Vérifier les champs Firestore

Va dans Firebase > Firestore > Collection « Users » et vérifie que tous les champs que tu veux utiliser existent :

• display_name ✅
• phone_number ❌ à créer
• city ❌ à créer
• state ❌ à créer
• description ❌ à créer

➡️ Ajoute les champs manquants dans Firestore avec le bon type (String).

---

🧠 Étape 3 — Pré-remplir les champs avec les données utilisateur

Chaque champ doit afficher les infos actuelles de l’utilisateur.

1. Dans chaque TextField, renseigne l’Initial Value
2. Utilise les données de l’utilisateur connecté :
   • Display Name → Authenticated User > display_name
   • Phone → Authenticated User > phone_number
   • City → Authenticated User > city
   • State → Authenticated User > state
   • Description → Authenticated User > description

⚠️ Attention à bien renommer tes champs dans FlutterFlow. Si tu dupliques un widget sans le renommer, tu risques de t’y perdre lors de l’étape d’update.

---

💾 Étape 4 — Sauvegarder les modifications

Quand l’utilisateur clique sur « Save Changes », on doit mettre à jour les infos dans Firestore.

1. Ajoute une action Update Document
2. Utilise comme référence : Authenticated User
3. Associe chaque champ modifié à son équivalent dans Firestore via From Variable > Widget State

Exemple :

• display_name ← widgetState.yourName
• phone_number ← widgetState.phoneNumber
• etc.

---

🔄 Étape 5 — Tester et vérifier

1. Lance ton app, rends-toi sur la page Modifier Profil
2. Entre des valeurs test (ex. : Paris, Alabama…)
3. Clique sur Save Changes
4. Retourne sur la page, les champs doivent être pré-remplis

💡 Tu peux également aller dans Firebase pour vérifier en direct que les nouvelles valeurs sont bien enregistrées.

---

🚧 Étape bonus — Uploader une photo de profil

L’upload d’image ne fait pas partie de ce tuto car il nécessite de configurer Firebase Storage et quelques réglages supplémentaires.
Mais pas d’inquiétude, une vidéo complète arrive très bientôt !

---

🙋‍♂️ Besoin d’aide ou de feedback ?

Tu bloques à une étape ? Tu veux aller plus loin dans ton app ?
💬 N’hésite pas à me poser tes questions en commentaire ou à visiter francomuoio.com pour découvrir mes accompagnements.

---

🎓 Conclusion

Créer une page d’édition de profil avec FlutterFlow et Firebase est une étape incontournable dans toute app un peu sérieuse.
Avec un peu de méthode, c’est simple et puissant.

Tu veux d’autres tutos sur FlutterFlow et le no-code ?
👉 Abonne-toi à ma chaîne YouTube