Back

Ajouter Firebase à votre application Flutter

 

Ajouter Firebase à votre application Flutter

Ajouter Firebase à votre application Flutter

  1. Objectif

    • Savoir utiliser les différents services de Firebase

  2. 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”:

  3. 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.

  4. 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.

  5. Command Line Interface de Firebase.

    • CLI Firebase = Command Line Interface de Firebase.
    • C’est un outil en ligne de commande qui te permet de gérer ton projet Firebase sans passer par l’interface web.
    • Avec la CLI Firebase, tu peux :
      • Déployer une app web ou Flutter vers Firebase Hosting.
      • Initialiser Firebase dans ton projet (Firestore, Auth, Storage…).
      • Gérer les règles de sécurité Firebase.
      • Simuler Firestore/Functions en local.
      • Déployer les Cloud Functions.

      Configurer ou mettre à jour la CLI

    • installer la CLI Firebase
      • Firebase CLI est une app Node.js, donc tu dois avoir Node.js installé : Télécharger Node.js
      • Tu peux vérifier avec : node -v ou npm -v
      • Voici les étapes pour installer la CLI Firebase dans votre projet Flutter depuis le terminal de Visual Studio Code :
        • Ouvrir le terminal de Visual Studio Code
        • Vous pouvez l’ouvrir à partir du menu « Terminal » ou en utilisant le raccourci clavier Ctrl + J (Windows/Linux) ou Cmd + J (Mac).
        • Installer la CLI Firebase

            • npm install -g firebase-tools

          • Cette commande installe globalement la CLI Firebase sur votre système.
        • Installer et exécuter la CLI FlutterFire

            • Ajouter Firebase à votre application Flutter

          • Aprés l’installation de un message d’avertissement sera déclanché. Ce message d’avertissement indique que les exécutables des packages Pub sont installés dans un répertoire qui n’est pas inclus dans votre variable d’environnement « Path ». Pour résoudre ce problème, vous devez ajouter le répertoire « C:\Users\riadh hajji\AppData\Local\Pub\Cache\bin » à votre variable d’environnement « Path » sur votre système Windows.

            • Ajouter Firebase à votre application Flutter

          • Voici comment procéder :
            • Cliquez sur le bouton Démarrer, tapez « Variables d’environnement » et sélectionnez l’option « Modifier les variables d’environnement système » dans les résultats de la recherche.
            • Dans la fenêtre qui s’ouvre, cliquez sur le bouton « Variables d’environnement… » en bas de la fenêtre.
            • Dans la section « Variables système », recherchez la variable appelée « Path » et sélectionnez-la, puis cliquez sur le bouton « Modifier… ».
            • Cliquez sur le bouton « Nouveau » et ajoutez le chemin « C:\Users\riadh hajji\AppData\Local\Pub\Cache\bin ».
            • Cliquez sur « OK » pour fermer toutes les fenêtres et enregistrer les modifications.
        • Authentifier la CLI Firebase

          • firebase login

        • Cette commande ouvrira une page web pour vous authentifier avec votre compte Google.
        • Suivez les instructions à l’écran pour vous authentifier jusqua’a ce message.

        • Ensuite, à la racine du répertoire de votre projet Flutter, exécutez cette commande (Biensure le nom du projet et le code seront dfférents):

          • flutterfire configure --project=.....

        • Initialiser le projet Firebase

          • firebase init

        • Cette commande vous guidera à travers le processus d’initialisation de votre projet Firebase.
        • Suivez les instructions et sélectionnez les fonctionnalités que vous souhaitez activer (Firestore, Hosting, etc.).
        • Vérifier l’installation
        • Une fois l’initialisation terminée, vous devriez voir un nouveau répertoire firebase dans votre projet Flutter.
        • Vous pouvez maintenant utiliser la CLI Firebase pour interagir avec votre projet Firebase depuis votre projet Flutter.
        • Ensuite, connectez-vous à Firebase avec votre compte Google, en lançant -> firebase login . Tapez Y pour qu’une page d’authentification s’ouvre et que vous puissiez vous connecter à votre compte Google.
        • Une fois authentifié, lancez la commande -> firebase projects:list .
        • Celle-ci permet de vérifier que la CLI est bien installée et a accès à vos projets. Une liste doit s’afficher, dans laquelle apparaissent vos projets Firebase (Pas vos applications, mais les projets que vous avez créés dans Firebase).

  6. Configuration du projet

    1. É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
    2. É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/.
    3. 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());
}




  7. 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()); 
}




author avatar
Riadh HAJJI

Riadh HAJJI

You may also like

Lire et écrire dans Firestore avec Flutter
16 avril, 2025

Google Firebase Firebase Real-time Database Ajouter Firebase à votre application Flutter ARécupérer et Ajouter des Données dans Firestore avec Flutter et StreamProvider Créer une application CRUD Flutter liée à un projet Firebase existant Implémenter une authentification Firebase avec Flutter   …

Implémenter une authentification Firebase avec Flutter
15 avril, 2025

Google Firebase Firebase Real-time Database Ajouter Firebase à votre application Flutter ARécupérer et Ajouter des Données dans Firestore avec Flutter et StreamProvider Créer une application CRUD Flutter liée à un projet Firebase existant Implémenter une authentification Firebase avec Flutter   …

Développer une application de notes CRUD avec Flutter et Firebase
15 avril, 2025

Google Firebase Firebase Real-time Database Ajouter Firebase à votre application Flutter ARécupérer et Ajouter des Données dans Firestore avec Flutter et StreamProvider Créer une application CRUD Flutter liée à un projet Firebase existant   Développer une application de notes CRUD …