Récupérer et Ajouter des Données dans Firestore avec Flutter et StreamProvider
Sommaire
- 1- Objectif
- 2- Tâche à réaliser
- 3- Créer un projet Firebase
- 4- Afficher les données de Firebase
- 4.1- Créez la classe
UserModel
- 4.2- Créez un fichier
firebase_services.dart
: - 4.3- Créez la classe
view_users_page
- 5- Ajouter un utilisateur dans Firestore dans Flutter
- 5.1- Étape 1 : Créer la boîte de dialogue
AddUserDialog
- 5.2- Étape 2 : Ajouter la méthode
addUser()
dans FirebaseServices - 5.3- Étape 3 : Ajouter un
FloatingActionButton
- 6- Modifier et Supprimer un utilisateur depuis Firestore dans Flutter
- 6.1- Étape 1 : Modifier UserModel pour inclure l’ID du document Firestore
- 6.2- Étape 2 : Ajouter les boutons Modifier & Supprimer dans la liste
- 6.3- Étape 3 : Adapter getUsers() pour passer l’ID
- 6.4- Étape 4 : Ajouter la méthode
deleteUser()
- 6.5- Étape 5 : Créer EditUserDialog
- 6.6- Étape 6 : Ajouter addUser() dans FirebaseServices
- 6.7- Étape 7 : Ajouter updateUser() dans FirebaseServices
- 6.8- Étape 8 : Ajouter une alerte de confirmation avant suppression
- 6.8.1- Cours Flutter
Récupérer et Ajouter des Données dans Firestore avec Flutter et StreamProvider
-
Objectif
- Savoir utiliser les différents services de Firebase
-
Tâche à réaliser
- Tout d’abord, laissez-moi vous montrer la base de données.
- Et les données seront affichées comme ceci :
-
Créer un projet Firebase
- Rendez-vous sur https://console.firebase.google.com
- Créez un nouveau projet
- Activez Firestore dans l’onglet Build > Firestore Database
- Dans le fichier
pubspec.yaml
, ajoutez : - Puis exécutez :
flutter pub get
-
Afficher les données de Firebase
-
Créez la classe
UserModel
- Il est temps de créer la classe du modèle => user_model.dart . Nous recevrons uniquement le nom et l’âge. Seuls deux champs sont donc nécessaires.
- Pourquoi créer une classe
UserModel
? - 1. Organisation du code (Modèle)
- C’est ce qu’on appelle un modèle de données. Ça permet de représenter clairement un utilisateur dans ton application.
- 2. Facilite l’échange de données
- Quand tu reçois des données depuis Firestore ou une API (généralement sous forme de Map<String, dynamic>), il est plus propre de les convertir en objets Dart (UserModel) au lieu de manipuler directement les maps.
- 3. Lisibilité et sécurité
- Travailler avec un UserModel rend ton code plus lisible, plus typé (tu sais que name est une String, age un int) et plus sûr que d’utiliser des maps avec des clés comme [‘name’] partout.
- 4. Utilisable avec Provider / StreamProvider
- Tu peux ensuite l’utiliser directement dans une StreamProvider<List<UserModel>> pour afficher une liste d’utilisateurs dans ton app.
-
Créez un fichier
firebase_services.dart
: - Partie 1 : Importations
- cloud_firestore : permet d’utiliser Firestore dans l’app Flutter.
- user_model.dart : on importe la classe UserModel qu’on a créée pour convertir les données Firestore en objets Dart.
- Partie 2 : Déclaration de la classe de service
FirebaseServices
: cette classe regroupe les opérations liées à Firestore (bonne pratique d’architecture)._db
: instance de Firebase Firestore utilisée pour interagir avec la base (lecture, ajout, suppression…).- Partie 3 : Méthode getUsers()
collection('user')
: Accède à la collection « user » dans Firestore..snapshots()
: Retourne un stream en temps réel de cette collection.- Toute modification (ajout/suppression/mise à jour) est immédiatement transmise à l’application Flutter.
.map(...)
: Transforme le snapshot Firestore en une liste d’objets UserModel.-
doc.data()
: Récupère les données de chaque document Firestore (sous forme de Map<String, dynamic>). UserModel.fromJson(...)
: Utilise le constructeur qu’on a défini pour transformer la Map en objet UserModel..toList()
: Convertit l’itération en une liste complète de UserModel.-
Créez la classe
view_users_page
-
Ajouter un utilisateur dans Firestore dans Flutter
-
Étape 1 : Créer la boîte de dialogue
AddUserDialog
- Créer un nouveau fichier: dans : lib/views/add_user_dialog.dart
-
Étape 2 : Ajouter la méthode
addUser()
dans FirebaseServices -
Étape 3 : Ajouter un
FloatingActionButton
- Modifie le Scaffold pour y inclure un
floatingActionButton
: -
Modifier et Supprimer un utilisateur depuis Firestore dans Flutter
- Dans cette étape il faut ajouter un id une nouvelle colonne, mais pourquoi ajouter le champ id ?
- Firestore stocke chaque document avec un identifiant unique (ID). Quand tu crées un utilisateur sans spécifier manuellement cet ID :
await FirebaseFirestore.instance.collection('user').add({...});
- Firestore génère automatiquement un ID aléatoire (comme A1bC2dEf3…).
- Mais si tu veux ensuite modifier ou supprimer un utilisateur spécifique, tu dois connaître cet ID, sinon tu ne pourras pas cibler le bon document.
- En ajoutant un champ id, tu peux :
- 1. Créer un document avec un ID que tu contrôles :
await FirebaseFirestore.instance.collection('user').doc(user.id).set(user.toJson());
- 2. Supprimer un document facilement :
await FirebaseFirestore.instance.collection('user').doc(user.id).delete();
- 3. Mettre à jour un utilisateur facilement :
await FirebaseFirestore.instance.collection('user').doc(user.id).update({
'name': newName,
'age': newAge,
}); - Dois-tu modifier le fichier JSON dans Firebase pour ajouter une nouvelle colonne (champ) ?
- Non, tu n’as pas besoin de modifier un fichier JSON dans Firebase.
- Firebase Firestore est une base de données NoSQL flexible, ce qui veut dire que tu peux ajouter un nouveau champ directement dans ton code Flutter, et Firestore va automatiquement l’enregistrer même s’il n’existait pas avant.
-
Étape 1 : Modifier UserModel pour inclure l’ID du document Firestore
- Firestore identifie les documents uniquement par leur ID
- Dans Firestore, chaque document possède un ID généré automatiquement (doc.id).
- Cet ID n’est pas inclus dans les données retournées par doc.data(), il est séparé.
- Pour pouvoir modifier (update) ou supprimer (delete) un document, il faut connaître son ID.
- Donc si tu veux faire :
FirebaseFirestore.instance.collection('users').doc(user.id).delete();
.
Tu dois obligatoirement avoir accès à l’ID quelque part. -
Étape 2 : Ajouter les boutons Modifier & Supprimer dans la liste
- Dans ViewUsersPage, modifie le ListTile :
-
Étape 3 : Adapter getUsers() pour passer l’ID
- Pourquoi
doc.id
est passé isolément dans UserModel.fromJson(…) et pas dans doc.data() ?
(doc) => UserModel.fromJson(doc.data(), doc.id)
Et non pas :(doc) => UserModel.fromJson(doc.data()) // Ça ne contient pas l’ID ! - doc.data() ne contient pas l’ID du document
- Firestore sépare l’identifiant (ID) du document de son contenu (data).
- L’ID est dans doc.id
- Donc si tu veux l’utiliser, tu dois le passer séparément.
- C’est pourquoi tu fais :
UserModel.fromJson(doc.data(), doc.id)
- Tu reçois :
- doc.data() → les champs name, age, etc.
doc.id → l'identifiant unique du document dans Firestore
-
Étape 4 : Ajouter la méthode
deleteUser()
-
Étape 5 : Créer EditUserDialog
-
Étape 6 : Ajouter addUser() dans FirebaseServices
-
Étape 7 : Ajouter updateUser() dans FirebaseServices
-
Étape 8 : Ajouter une alerte de confirmation avant suppression
- L’utilisateur doit voir une boîte de dialogue avec “Annuler” ou “Supprimer”.
- S’il confirme, on supprime via deleteUser.
- Tu peux aussi afficher un petit SnackBar en bas pour indiquer que l’utilisateur a été supprimé.