Ajouter Firebase à votre application Flutter

Objectif

Comprendre l’écosystème Firebase et ses services principaux
Créer et configurer un projet Firebase
Intégrer Firebase dans une application Flutter

Créez et configurez votre projet Firebase

En premier lieu, si vous n’avez aucun compte Gmail, la première étape sera d’en créer un.
Connectez-vous à un compte Google, puis accédez à la console Firebase et cliquez sur Ajouter un projet.
Entrez un nom de projet et cliquez sur Continuer.
Pour créer un projet dans la console Firebase : Lire notre article Installer FireBase
Une fois rendu dans votre console, cliquez sur le bouton “Ajouter un projet” pour créer un nouveau projet.
Donnez ensuite un nom à votre projet Firebase, comme le nom de votre application ou un nom de test comme “Firebase Flutter”:

Ajouter Firebase sur son application mobile

Vous souhaitez maintenant ajouter Firebase à votre application mobile iOS, Android et/ou Web ?
1 – Cliquez sur l’icône Android, iOS ou Web qui se trouve en dessous du nom de votre projet.
2 – Remplissez le « Nom du package », puis cliquez sur « Enregistrer l’application ».

Dans un projet Android (Flutter ou natif), le nom du package (ou identifiant de l’application) est défini par la propriété :
applicationId

Elle se trouve dans le fichier : android/app/build.gradle

3 – Téléchargez le fichier « google-service-json » pour Android ou « GoogleService-Info.plist » pour iOS grâce au bouton et cliquez sur « Continuer ». Gardez le fichier pour l’intégrer dans l’application ensuite.

Le fichier google-services.json doit être placé exactement ici dans ton projet Flutter : <ton_projet>/android/app/google-services.json

Créer des accès sur Firebase

1 – Cliquez sur l’icône des paramètres puis sur « Utilisateurs et autorisations »

2 – Cliquez sur « Ajouter un membre », saisissez son adresse email et sélectionnez le rôle « Attribuer des rôles Firebase ». Enfin, cliquez dans la case de la première ligne « Firebase » de la première colonne « Administrateur » afin que toutes les cases se cochent automatiquement et donnent ainsi les accès nécessaires à vos développeurs.

Configuration du projet

Étape 1 : Créer un projet Firebase

Va sur Firebase Console
Clique sur « Ajouter un projet »
Donne un nom à ton projet, accepte les conditions, clique sur Continuer
Désactive Google Analytics (facultatif) → Créer le projet

Étape 2 : Ajouter Firebase à ton projet Flutter

Créer une nouvelle application Flutter

flutter create nom_de_votre_app
Ouvrez le projet dans un IDE (Android Studio, VS Code…)

Se connecter à Firebase et configurer FlutterFire CLI

Si ce n’est pas encore fait, installe FlutterFire CLI :dart pub global activate flutterfire_cli
Puis connecte-toi :flutterfire login
Et configure Firebase pour ce projet :flutterfire configure
Lors de la configuration :

Choisis le projet Firebase existant (celui utilisé par l’app Books).
Sélectionne Android comme plateforme.
Entre le bon nom de package (ex: com.example.mesnotes).
Cela génère un fichier firebase_options.dart dans lib/.

Configurer Firebase dans le projet Flutter

a. Copier le google-services.json:

Téléchargé depuis la console Firebase (section Android).
Colle-le dans : android/app/google-services.json

b. Modifier android/build.gradle :

buildscript { dependencies { classpath("com.google.gms:google-services:4.3.15") } repositories { google() mavenCentral() } }

c. Modifier android/app/build.gradle :

plugins { id("com.android.application") id("kotlin-android") id("dev.flutter.flutter-gradle-plugin") id("com.google.gms.google-services") }

d. Modifier le fichier :android/app/build.gradle.kts
Dans ton fichier android/app/build.gradle.kts, ajoute (ou modifie) ce bloc dans android

android { ndkVersion = "27.0.12077973" // ... le reste de ta configuration Android }

d. Ajouter les dépendances dans pubspec.yaml :

dependencies: firebase_core: ^2.0.0 cloud_firestore: ^4.0.0 flutter: sdk: flutter

e. Initialiser Firebase dans main.dart :

import 'package:flutter/material.dart'; import 'package:firebase_core/firebase_core.dart'; import 'firebase_options.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); runApp(MyApp()); }

initialisez Firebase et ajoutez des plugins

Pour initialiser Firebase, appelez Firebase. initializeApp à partir du package firebase_core avec la configuration de votre nouveau fichier firebase_options.dart :

importer 'package:firebase_core/firebase_core.dart' ; importer 'package:flutter/material.dart' ; importer 'firebase_options.dart' ; void main() async { WidgetsFlutterBinding.ensureInitialized(); wait Firebase.initializeApp ( options : DefaultFirebaseOptions.currentPlatform, ); runApp( const MonApp()); }

Command Line Interface de Firebase

CLI Firebase = Command Line Interface de Firebase.
C’est un outil en ligne de commande très puissant qui permet de gérer un projet Firebase sans passer par la console web.
Grâce à la CLI Firebase, tu peux par exemple :

Déployer une application Web ou Flutter sur Firebase Hosting avec une simple commande : firebase deploy
Initialiser Firebase dans un projet (Firestore, Auth, Storage…)
Configurer et mettre à jour les règles de sécurité Firestore et Storage
Tester ton application hors-ligne avec : simulateurs locaux (Firestore + Cloud Functions)
Déployer et gérer facilement les Cloud Functions
Obtenir des infos sur tes projets, tes apps, tes identifiants, etc.

Installer la CLI Firebase

Firebase CLI fonctionne avec Node.js. Il faut donc installer Node.js si ce n’est pas déjà fait :
Télécharger Node.js
Tu peux vérifier son installation avec :

node -v
npm -v

Étapes pour installer la CLI Firebase dans un projet Flutter :

Ouvrir le terminal dans Visual Studio Code :

Ctrl + J sur Windows/Linux ou Cmd + J sur Mac
Installer la CLI Firebase globalement :

npm install -g firebase-tools

Cette commande installe la CLI sur tout le système ✅

Installer la CLI FlutterFire

Après installation, un avertissement peut apparaître. Il indique que les exécutables Pub ne sont pas dans le Path.
Solution : ajouter ce chemin dans les variables d’environnement Windows :

C:\Users\<nom_utilisateur>\AppData\Local\Pub\Cache\bin

Procédure pour modifier le PATH :

Ouvrir : Modifier les variables d’environnement système
Cliquer sur : Variables d’environnement…
Choisir : Path → Modifier…
Cliquer sur Nouveau → Ajouter le chemin
Valider avec OK ✅

Authentifier la CLI Firebase

firebase login

Une page Google s’ouvrira pour se connecter à ton compte Firebase.

Configurer Firebase dans ton projet Flutter

flutterfire configure --project=code_du_projet

Cette commande associe ton projet Flutter au bon projet Firebase 💡
Elle génère automatiquement un fichier essentiel :

lib/firebase_options.dart
Ainsi que les fichiers de configuration Android, iOS, Web ✅
Initialiser Firebase (pour activer Hosting, Firestore…)

firebase init

Tu choisis les services à activer :

Firestore, Functions, Hosting, Storage…
Vérifier que tout fonctionne 🎯

Liste des projets accessibles depuis la CLI :

firebase projects:list

Ton projet doit apparaître dans la liste ✅

Après cela, tu peux utiliser toutes les commandes Firebase depuis ton terminal ✔

Flutter

Ajouter Firebase à votre application Flutter