Ajouter Firebase à votre application Flutter
Ajouter Firebase à votre application Flutter
-
Objectif
-
Créez et configurez votre projet Firebase
- 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 le projet créé, vous devriez pouvoir voir le tableau de bord du projet. Pour configurer le projet Flutter :
- Cliquez sur l’icône Flutter
-
Ajouter Firebase à votre application Flutter
- installer la CLI Firebase
- Pour installer la CLI Firebase (Command-Line interface) commencez par entrer cette commande dans le terminal de Visual Studio
- 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 - Cette commande installe globalement la CLI Firebase sur votre système.
- Installer et exécuter la
CLI FlutterFire - 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.
- 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
- 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):
- Initialiser le projet Firebase
- 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).
npm install -g firebase-tools
firebase login
flutterfire configure --project=.....
firebase initInstaller les packages Firebase
- Pour interagir avec les services Firebase dans votre application Flutter, vous devez ajouter des packages Firebase à votre fichier « pubspec.yaml« .
- Ouvrez le fichier et ajoutez les dépendances suivantes pour les services que vous prévoyez d’utiliser. Par exemple, si vous souhaitez utiliser l’authentification Firebase et Firestore :
dépendances :
flutter :
sdk : flutter
firebase_core : ^dernière_version
firebase_auth : ^dernière_version
cloud_firestore : ^dernière_version
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());
}
