Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Premiers pas avec Firebase dans votre projet Flutter

Prérequis

Installez l'éditeur ou l'IDE de votre choix.
Installez Flutter pour votre système d'exploitation, y compris les éléments suivants :
- SDK Flutter
- Bibliothèques d'assistance
- Logiciels et SDK spécifiques à la plate-forme

Conditions préalables spécifiques à la plate-forme :

Apple

Configurez un appareil Apple physique ou utilisez un simulateur pour exécuter votre application.
Assurez-vous que votre application Flutter cible les versions de plate-forme suivantes ou ultérieures :
- iOS 15
- macOS 10.15

Voulez-vous utiliser Cloud Messaging ?

Voici les prérequis pour Cloud Messaging sur les plates-formes Apple :

Configurez un appareil Apple physique.

Obtenez une clé d'authentification Apple Push Notification pour votre compte de développeur Apple.

Activez les notifications push dans Xcode sous App > Capabilities.

Android

Configurez un appareil ou un émulateur pour exécuter votre application. Les émulateurs doivent utiliser une image d'émulateur avec Google Play.
Assurez-vous que votre application répond aux exigences suivantes :
- Ciblage du niveau d'API 23 (Marshmallow) ou version ultérieure
- Utilise Android 6.0 ou version ultérieure

Web

Aucun prérequis spécifique à une plate-forme

Si vous n'avez pas encore d'application Flutter, vous pouvez suivre le tutoriel Premiers pas : essai routier pour en créer une à l'aide de l'éditeur ou de l'IDE de votre choix.

Étape 1 : Installez les outils de ligne de commande requis

Si ce n'est pas déjà fait, installez la CLI Firebase.
Exécutez la commande suivante pour vous connecter à Firebase avec votre compte Google :
```
firebase login
```
Installez la CLI FlutterFire en exécutant la commande suivante à partir de n'importe quel répertoire :
```
dart pub global activate flutterfire_cli
```

Étape 2 : Configurez vos applications pour utiliser Firebase

Utilisez la CLI FlutterFire pour configurer vos applications Flutter afin qu'elles se connectent à Firebase.

Depuis le répertoire de votre projet Flutter, exécutez la commande suivante pour démarrer le workflow de configuration de l'application :

flutterfire configure

À quoi sert ce workflow flutterfire configure ?

Le workflow flutterfire configure effectue les opérations suivantes :

Vous demande de sélectionner les plates-formes (iOS, Android, Web) compatibles avec votre application Flutter. Pour chaque plate-forme sélectionnée, la CLI FlutterFire crée une application Firebase dans votre projet Firebase.

Vous pouvez choisir d'utiliser un projet Firebase existant ou d'en créer un. Si vous avez déjà enregistré des applications dans un projet Firebase existant, la CLI FlutterFire tentera de les faire correspondre en fonction de la configuration actuelle de votre projet Flutter.

Remarque : Voici quelques conseils pour configurer et gérer votre projet Firebase :

Consultez nos bonnes pratiques pour ajouter des applications à un projet Firebase, y compris pour gérer plusieurs variantes.

Activez Google Analytics dans votre projet pour bénéficier d'une expérience optimale avec de nombreux produits Firebase, comme Crashlytics et Remote Config.

Crée un fichier de configuration Firebase (firebase_options.dart) et l'ajoute à votre répertoire lib/.

Remarque : Ce fichier de configuration Firebase contient des identifiants uniques, mais pas secrets, pour chaque plate-forme que vous avez sélectionnée.
Consultez Comprendre les projets Firebase pour en savoir plus sur ce fichier de configuration.

(pour Crashlytics ou Performance Monitoring sur Android) ajoute les plug-ins Gradle spécifiques au produit requis à votre application Flutter.

Remarque : Pour que la CLI FlutterFire ajoute le plug-in Gradle approprié, le plug-in Flutter du produit doit déjà être importé dans votre application Flutter.

Après cette première exécution de flutterfire configure, vous devez réexécuter la commande chaque fois que vous :

Commencez à prendre en charge une nouvelle plate-forme dans votre application Flutter.
Commencez à utiliser un nouveau service ou produit Firebase dans votre application Flutter, en particulier si vous commencez à utiliser la connexion avec Google, Crashlytics, Performance Monitoring, ou Realtime Database.

En exécutant à nouveau la commande, vous vous assurez que la configuration Firebase de votre application Flutter est à jour et (pour Android) ajoutez automatiquement les plug-ins Gradle requis à votre application.

Étape 3 : Initialisez Firebase dans votre application

Dans le répertoire de votre projet Flutter, exécutez la commande suivante pour installer le plug-in principal :
```
flutter pub add firebase_core
```
À partir du répertoire de votre projet Flutter, exécutez la commande suivante pour vous assurer que la configuration Firebase de votre application Flutter est à jour :
```
flutterfire configure
```
Dans votre fichier lib/main.dart, importez le plug-in Firebase Core et le fichier de configuration que vous avez généré précédemment :
```
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
```

Toujours dans votre fichier lib/main.dart, initialisez Firebase à l'aide de l'objet DefaultFirebaseOptions exporté par le fichier de configuration :

WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());

Recompilez votre application Flutter :
```
flutter run
```

Si vous préférez utiliser un projet de démonstration, vous pouvez démarrer l'émulateur Firebase et, dans votre fichier lib/main.dart, initialiser Firebase à l'aide de demoProjectId (il doit commencer par demo-) :

await Firebase.initializeApp(
  demoProjectId: "demo-project-id",
);

Étape 4 : Ajouter des plug-ins Firebase

Vous accédez à Firebase dans votre application Flutter via les différents plug-ins Firebase Flutter, un pour chaque produit Firebase (par exemple, Cloud Firestore, Authentication, Analytics, etc.).

Flutter étant un framework multiplate-forme, chaque plug-in Firebase s'applique aux plates-formes Apple, Android et Web. Par conséquent, si vous ajoutez un plug-in Firebase à votre application Flutter, il sera utilisé par les versions Apple, Android et Web de votre application.

Voici comment ajouter un plug-in Firebase Flutter :

Depuis le répertoire de votre projet Flutter, exécutez la commande suivante :
```
flutter pub add PLUGIN_NAME
```
Depuis le répertoire de votre projet Flutter, exécutez la commande suivante :
```
flutterfire configure
```
L'exécution de cette commande garantit que la configuration Firebase de votre application Flutter est à jour et, pour Crashlytics et Performance Monitoring sur Android, ajoute les plug-ins Gradle requis à votre application.
Une fois l'opération terminée, recréez votre projet Flutter :
```
flutter run
```

C’est terminé ! Vos applications Flutter sont enregistrées et configurées pour utiliser Firebase.

Points à prendre en compte pour créer des applications Web

Compatibilité avec les Trusted Types

Le SDK Firebase pour Flutter est compatible avec les types fiables, qui permettent d'éviter les attaques XSS (script intersites) basées sur le DOM (côté client). Lorsque vous activez l'application des types fiables pour votre application, le SDK Firebase injecte ses scripts dans le DOM à l'aide de règles de type fiable personnalisées, nommées flutterfire-firebase_core, flutterfire-firebase_auth, etc.

Désactiver l'injection automatique du SDK JavaScript Firebase

Par défaut, le SDK Firebase Flutter injecte automatiquement le SDK JavaScript Firebase lors de la compilation pour le Web. Si vous ne souhaitez pas que le SDK JavaScript Firebase soit injecté automatiquement, vous pouvez procéder comme suit :

Ignorez le script d'injection automatique en ajoutant la propriété suivante dans une balise <script> du fichier web/index.html de votre projet Flutter :

<!-- Add this property inside a <script> tag within your "web/index.html" file in your Flutter project -->
<!-- Put in the names of all the plugins you wish to ignore: -->
window.flutterfire_ignore_scripts = ['analytics', 'firestore'];

Chargez le script manuellement à l'aide de l'une des options suivantes :

Option 1 : Ajoutez le SDK de manière explicite à votre fichier web/index.html, dans le rappel window.addEventListener :

  window.addEventListener('load', async function (ev) {
    window.firebase_firestore = await import("https://www.gstatic.com/firebasejs/12.13.0/firebase-firestore.js");
    window.firebase_analytics = await import("https://www.gstatic.com/firebasejs/12.13.0/firebase-analytics.js");

    _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
      // rest of the code

Option 2 : Téléchargez le code du SDK JavaScript Firebase du plug-in à partir du domaine gstatic, puis enregistrez-le dans un fichier JavaScript à conserver dans votre projet et à charger manuellement :

  // "web/my-analytics.js" & "web/my-firestore.js" file loaded as a script into your "web/index.html" file:
  window.addEventListener('load', async function (ev) {
    window.firebase_analytics = await import("./my-analytics.js");
    window.firebase_firestore = await import("./my-firestore.js");

    _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
      // rest of the code

Plug-ins disponibles

Produit	Nom du plug-in	Autre produit Apple (macOS, etc.)	Windows
Firebase AI Logic ¹	`firebase_ai`	bêta
Analytics	`firebase_analytics`	bêta
App Check	`firebase_app_check`	bêta
Authentication	`firebase_auth`	bêta	bêta
Cloud Firestore	`cloud_firestore`	bêta	bêta
Cloud Functions	`cloud_functions`	bêta
Cloud Messaging	`firebase_messaging`	bêta
Cloud Storage	`firebase_storage`	bêta	bêta
Crashlytics	`firebase_crashlytics`	bêta
SQL Connect ²	`firebase_data_connect`
Dynamic Links	`firebase_dynamic_links`
In-App Messaging	`firebase_in_app_messaging`
Firebase installations	`firebase_app_installations`	bêta
Téléchargeur de modèles de ML	`firebase_ml_model_downloader`	bêta
Performance Monitoring	`firebase_performance`
Realtime Database	`firebase_database`	bêta
Remote Config	`firebase_remote_config`	bêta

^{1 Firebase AI Logic s'appelait auparavant
"Vertex AI in Firebase" avec le plug-in
firebase_vertexai.}

^{2 Firebase SQL Connect s'appelait auparavant
"Firebase Data Connect".}

Étapes suivantes

Familiarisez-vous avec l'atelier de programmation Firebase Flutter.
Préparez-vous à lancer votre application :
- Configurez des alertes budgétaires pour votre projet dans la console Google Cloud.
- Surveillez le tableau de bord "Utilisation et facturation" de la console Firebase pour obtenir une vue d'ensemble de l'utilisation de votre projet dans plusieurs services Firebase.
- Consultez la checklist de lancement Firebase.