Configurer Firebase dans un projet Flutter pour Android
Sommaire
- 1- Objectifs
- 2- Étape 1 : Créer un projet Firebase
- 3- Configurer Firebase sur Android
- 3.1- Étape 1 : Trouver le nom du package Android
- 3.2- Étape 2 : Installation Firebase/Flutter sur Android
- 3.2.1- Première méthode
- 3.2.2- Deuxième méthode: installer Firebase avec la CLI
- 3.3- Étape 3 : Configurez vos applications pour utiliser Firebase
- 3.3.1- Cours Flutter
Ajouter Firebase à votre application Flutter
-
Objectifs
- À la fin de ce tutoriel, vous serez capable de :
- Créer un projet Firebase et connecter une application Android.
- Configurer les fichiers Android nécessaires pour intégrer Firebase à votre projet Flutter.
- Utiliser Firebase avec Flutter en initialisant correctement les services Firebase.
- Ajouter des fonctionnalités de base Firebase comme Firebase Analytics ou tout autre service Firebase selon vos besoins.
- Tester et vérifier que l’intégration fonctionne sans erreur.
- Ce tutoriel vous permet d’avoir une base solide pour utiliser des services avancés de Firebase, tels que l’authentification, Firestore, ou le stockage cloud, dans vos projets Flutter.
-
Étape 1 : Créer un projet Firebase
- Accédez à Firebase :
- Vous pouvez pour cela vous rendre sur le site officiel de Firebase: https://firebase.google.com/
- Si vous avez déjà un compte, vous pouvez rendre directement dans votre console Firebase: https://console.firebase.google.com/u/0/
- Accès à la console Firebase :
- Créer un nouveau projet Firebase :
- Une fois dans votre console Firebase, cliquez sur le bouton « Ajouter un projet ».
- Étapes de création :
- Donnez un nom à votre projet (par exemple : « ProjetDemoFlutter »).
- Vous pourrez toujours créer d’autres projets Firebase par la suite, ici il s’agit juste d’un projet test.
- Si nécessaire, activez Google Analytics pour bénéficier de statistiques avancées.
- Je vous invite à ne pas activer Google Analytics pour le moment, car c’est un outil plus avancé qui demande de nombreuses configurations.
- Cliquez sur « Créer un projet » pour finaliser cette étape.
- Vous pouvez donc directement cliquer sur “Create project” pour lancer la création de votre projet Firebase:
- Se connecter à Firebase depuis Flutter
- On passe donc maintenant au code Dart qui nous permettra de nous connecter à Firebase depuis Flutter.
- Pour cela nous allons utiliser le package
firebase_coredont je vous laisse repérer la dernière version:https://pub.dev/packages/firebase_core - Vous pouvez ajouter les dépendances de ce package dans votre fichier Yaml:
- Corriger les erreurs d’importation Firebase dans Flutter
- Si l’importation suivante apparaît en rouge dans votre code :
- Cela signifie que la dépendance firebase_core n’est pas encore ajoutée ou qu’elle n’est pas installée correctement dans votre projet.
- Étapes pour corriger :
- Survoler le texte en rouge :
- Placez votre souris sur la ligne rouge sous l’importation firebase_core.
- Utiliser Quick Fix dans VSCode :
- Une icône d’ampoule ou un message s’affichera automatiquement.
- Cliquez dessus ou appuyez sur Ctrl + . (Windows/Linux) ou Cmd + . (Mac).
- Choisir « Add dependencies » :
- Sélectionnez l’option « Add ‘firebase_core’ to pubspec.yaml » dans la liste.
- Attendre la résolution :
- VSCode ajoutera automatiquement la dépendance firebase_core à votre fichier pubspec.yaml.
- Par exemple, il ajoutera une ligne similaire à celle-ci :
- Installer les dépendances :
- VSCode devrait automatiquement exécuter flutter pub get pour télécharger et installer la dépendance.
- Si ce n’est pas le cas, exécutez manuellement dans le terminal :
flutter pub get -
Configurer Firebase sur Android
-
Étape 1 : Trouver le nom du package Android
- Localiser le fichier
AndroidManifest.xml: - Accédez au fichier suivant dans votre projet Flutter :
android/app/src/main/AndroidManifest.xml - Identifier le nom du package :
- Recherchez la première balise <manifest> dans le fichier.
- L’attribut package contient le nom du package Android. Exemple :
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.firebase"> - Ici, le nom du package est : com.example.firebase.
- Si le fichier
android/app/src/main/AndroidManifest.xmlne contient pas votre package vous le cherchez dans /android/app/ - La valeur de applicationId est utilisée comme nom de package Android pour votre application.
- Une fois donc que vous l’avez récupéré, entrez-le dans le champ “Android package name” puis entrez le nom de votre application:
-
Étape 2 : Installation Firebase/Flutter sur Android
-
Première méthode
- Voici les étapes à suivre pour intégrer votre base de données Firebase à votre application Android.
- Sur la page d’accueil de votre projet Firebase, cliquez sur le bouton Android (au niveau de « ajouter une application ») ;
- Rendez-vous sur le dossier de votre application depuis Visual Studio et allez dans le dossier
android>app>build.gradlepour avoir votre applicationId (il doit se trouver dans defaultConfig{}) ;
- Vous pouvez également ajouter les certificats de signature SHA-1 et SHA-2 dès maintenant, même si on ne vous les demandera qu’au moment de publier votre application ;
- Une fois toutes les informations ajoutées, téléchargez le fichier info.plist qui est généré. Placez-le dans votre application, dans Visual Studio en suivant ce chemin : android>app ;
- Dans Visual Studio, retournez dans android>app>src et aller sur build.gradle pour changer la valeur de ndkVersion à « 26.1.10909125 » et celle de minSdkVersion à 23 (Cela permet d’éviter certains bugs).
- Ajoutez la ligne de code apply «
com.google.gms.google-services» tout en bas de votre fichier (android>app>src>build.gradle). C’est cette ligne qui va permettre de lire le fichier de config Firebase. Pensez aussi à enregistrer vos modifications si vous n’avez pas activé la sauvegarge automatique avec Visual Studio ; - Revenez en arrière, dans le fichier android et ouvrez le second fichier build.gradle qui se trouve dans celui-ci. Ajouter les lignes de code classpath ‘com.google.gms:google-services:4.4.2‘ et classpath ‘com.google.firebase:firebase-crashlytics-gradle:3.0.2‘ dans la partie dependencies** (Exemple ci-dessous).
- Si vous ne faites pas cette étape, une erreur devrait apparaitre dans Android studio lorsque vous allez lancer l’application ;
- Une fois cela fait, ouvrez votre application dans Android studio et laissez les packages charger. Si une update vous est proposée, il est aussi conseillé de l’installer. Parfois, plusieurs updates sont à faire et vous devrez alors fermez et rouvrir Android studio jusqu’à ce que plus aucune mise à jour ne vous soit proposée ;
- Enfin, cliquez sur le petit éléphant en haut à droite dans la barre de menu, pour tester la connexion à Firebase. Si tout se déroule bien, c’est que vous avez correctement installé Firebase sur votre projet Flutter ;
- La dernière étape va être d’ajouter les packages firebase_core, firebase_auth et cloud_firestore à votre application, pour pouvoir utiliser les fonctions de Firebase.
-
Deuxième méthode: installer Firebase avec la CLI
- La seconde méthode pour installer Firebase sur Flutter est de le faire grâce à un package.
- Tout d’abord, rendez-vous sur le site de Firebase, cliquez sur Get Started, puis « ajoutez un projet ». Indiquez le nom que vous voulez donner à votre projet, puis à la page suivante, décochez « Activer Google Analytics ».
- GA4 vous permet de mesurer tout ce qui se passe sur votre application (nombre d’utilisateurs, cliques sur un bouton, etc). Cependant, vous n’en aurez pas besoin tant que votre application ne sera pas publiée. Autant donc en restez aux fondamentaux pour ce guide et le décocher pour le moment. Vous pourrez toujours l’installer plus tard, ne vous inquiétez pas.
- Une fois cela fait, vous allez devoir installer :
- La Command-Line interface (CLI) Firebase ;
- La Command-Line interface (CLI) Flutterfire.
- Étape 1: Installez les outils de ligne de commande requis
- Installer la
CLI Firebase - Si vous ne l’avez pas déjà fait, installez la
CLI Firebase. - Pour installer la CLI Firebase à l’aide du script d’installation automatique, exécutez la commande cURL suivante:
curl -sL https://firebase.tools | bash - Ce script détecte automatiquement votre système d’exploitation, télécharge la dernière version de la CLI Firebase, puis active la commande firebase disponible dans le monde entier.
- Ensuite, connectez-vous à Firebase avec votre compte Google, en lançant ->
firebase login. TapezYpour qu’une page d’authentification s’ouvre et que vous puissiez vous connecter à votre compte Google. - Une fois authentifié, vérifiez que la CLI est correctement installée et qu’elle accède à votre compte en listant vos projets Firebase. Exécutez la commande suivante :
firebase projects:list - Installer la
CLI FlutterFire - Connectez-vous à Firebase à l’aide de votre compte Google en exécutant la commande suivante:
firebase login - Installez la
CLI FlutterFireen exécutant la commande suivante à partir de n’importe quel répertoire:dart pub global activate flutterfire_cli - Puis, pour s’assurer encore une fois que que la cli a été installée, lancez la commande flutterfire -—help . Si vous avez correctement installé la cli, un menu d’aide devrait alors s’afficher
-
Étape 3 : Configurez vos applications pour utiliser Firebase
- Il est possible à FlutterFire de générer le code Dart nécessaire pour utiliser Firebase dans son application Flutter en lançant la commande ->
flutterfire configure - On est ensuite invité à choisir le projet Firebase qui nous intéresse, ainsi que les plateformes sur lesquels on souhaite l’installer (Android, IOS, Mac ou Web).
- Une fois les plateformes choisies, les dossiers d’installation se créent et Firebase peut alors communiquer avec votre application. Il ne reste alors plus qu’à ajouter les packages dont vous avez besoin pour utiliser Firebase avec Flutter. La plupart du temps cela va être :
- flutter pub add firebase_core
- flutter pub add firebase_auth
- flutter pub add firebase_ui_auth
- Parfois il faudra aussi ajouter flutter pub add cloud_firestore
import 'package:firebase_core/firebase_core.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(const MyApp());
}
import 'package:firebase_core/firebase_core.dart';-
dependencies:
firebase_core: ^2.14.0
buildscript {
repositories {
// …
}
dependencies {
// …
classpath ‘com.google.gms:google-services:4.4.2’
classpath »com.google.firebase:firebase-crashlytics-gradle:3.0.2′
}
}