Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Erste Schritte mit Firebase in Ihrem Flutter-Projekt

Vorbereitung

Installieren Sie Ihren bevorzugten Editor oder Ihre bevorzugte IDE.
Installieren Sie Flutter für Ihr Betriebssystem. Dazu gehören:
- Flutter SDK
- Unterstützende Bibliotheken
- Plattformspezifische Software und SDKs

Plattformspezifische Voraussetzungen:

Apple

Richten Sie ein physisches Apple-Gerät ein oder verwenden Sie einen Simulator, um Ihre App auszuführen.
Ihre Flutter-App muss auf die folgenden Plattformversionen oder höher ausgerichtet sein:
- iOS 15
- macOS 11

Möchten Sie Cloud Messaging verwenden?

Für Cloud Messaging auf Apple-Plattformen gelten die folgenden Voraussetzungen:

Richten Sie ein physisches Apple-Gerät ein.

Fordern Sie einen Authentifizierungsschlüssel für Apple Push-Benachrichtigungen für Ihr Apple-Entwicklerkonto an.

Aktivieren Sie Push-Benachrichtigungen in Xcode unter App > Funktionen.

Android

Richten Sie ein Gerät oder einen Emulator zum Ausführen Ihrer App ein. Für Emulatoren muss ein Emulator-Image mit Google Play verwendet werden.
Ihre App muss die folgenden Anforderungen erfüllen:
- Ziel-API-Level 24 (Nougat) oder höher
- Android 7.0 oder höher

Web

Keine plattformspezifischen Voraussetzungen

Wenn Sie noch keine Flutter-App haben, können Sie die Erste Schritte: Test Drive durchführen, um eine neue Flutter-App mit Ihrem bevorzugten Editor oder Ihrer bevorzugten IDE zu erstellen.

Schritt 1: Erforderliche Befehlszeilentools installieren

Installieren Sie das Firebase-CLI, falls noch nicht geschehen.
Melden Sie sich mit Ihrem Google-Konto in Firebase an. Führen Sie dazu den folgenden Befehl aus:
```
firebase login
```
Installieren Sie die FlutterFire CLI, indem Sie den folgenden Befehl in einem beliebigen Verzeichnis ausführen:
```
dart pub global activate flutterfire_cli
```

Schritt 2: Apps für die Verwendung von Firebase konfigurieren

Verwenden Sie die FlutterFire-Befehlszeile, um Ihre Flutter-Apps so zu konfigurieren, dass sie eine Verbindung zu Firebase herstellen.

Führen Sie im Verzeichnis Ihres Flutter-Projekts den folgenden Befehl aus, um den Workflow für die App-Konfiguration zu starten:

flutterfire configure

Was macht dieser flutterfire configure-Workflow?

Der Workflow flutterfire configure führt folgende Schritte aus:

Sie werden aufgefordert, die Plattformen (iOS, Android, Web) auszuwählen, die in Ihrer Flutter-App unterstützt werden. Für jede ausgewählte Plattform erstellt die FlutterFire-Befehlszeile eine neue Firebase-App in Ihrem Firebase-Projekt.

Sie können entweder ein vorhandenes Firebase-Projekt verwenden oder ein neues erstellen. Wenn Sie bereits Apps in einem vorhandenen Firebase-Projekt registriert haben, versucht die FlutterFire-Befehlszeile, sie anhand Ihrer aktuellen Flutter-Projektkonfiguration abzugleichen.

Hinweis: Hier sind einige Tipps zum Einrichten und Verwalten Ihres Firebase-Projekts:

In unseren Best Practices finden Sie Informationen zum Hinzufügen von Apps zu einem Firebase-Projekt, einschließlich des Umgangs mit mehreren Varianten.

Aktivieren Sie Google Analytics in Ihrem Projekt. Dadurch können Sie viele Firebase-Produkte wie Crashlytics und Remote Config optimal nutzen.

Erstellt eine Firebase-Konfigurationsdatei (firebase_options.dart) und fügt sie Ihrem lib/-Verzeichnis hinzu.

Hinweis :Diese Firebase-Konfigurationsdatei enthält eindeutige, aber nicht verborgene Kennungen für jede ausgewählte Plattform.
Weitere Informationen zu dieser Konfigurationsdatei finden Sie unter Firebase-Projekte.

(für Crashlytics oder Performance Monitoring unter Android) Fügt Ihrer Flutter-App die erforderlichen produktspezifischen Gradle-Plug-ins hinzu.

Hinweis: Damit die FlutterFire-Befehlszeile das entsprechende Gradle-Plug-in hinzufügen kann, muss das Flutter-Plug-in des Produkts bereits in Ihre Flutter-App importiert worden sein.

Nach der ersten Ausführung von flutterfire configure müssen Sie den Befehl in folgenden Fällen noch einmal ausführen:

Unterstützung für eine neue Plattform in Ihrer Flutter-App hinzufügen
Sie beginnen, einen neuen Firebase-Dienst oder ein neues Firebase-Produkt in Ihrer Flutter-App zu verwenden, insbesondere wenn Sie „Über Google anmelden“, Crashlytics, Performance Monitoring oder Realtime Database verwenden.

Wenn Sie den Befehl noch einmal ausführen, wird die Firebase-Konfiguration Ihrer Flutter-App aktualisiert und (für Android) werden Ihrer App automatisch alle erforderlichen Gradle-Plug-ins hinzugefügt.

Schritt 3: Firebase in Ihrer App initialisieren

Führen Sie im Flutter-Projektverzeichnis den folgenden Befehl aus, um das Core-Plug-in zu installieren:
```
flutter pub add firebase_core
```
Führen Sie im Flutter-Projektverzeichnis den folgenden Befehl aus, um sicherzustellen, dass die Firebase-Konfiguration Ihrer Flutter-Anwendung auf dem neuesten Stand ist:
```
flutterfire configure
```
Importieren Sie in Ihrer lib/main.dart-Datei das Firebase Core-Plug-in und die zuvor generierte Konfigurationsdatei:
```
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
```

Initialisieren Sie Firebase in Ihrer lib/main.dart-Datei mit dem DefaultFirebaseOptions-Objekt, das von der Konfigurationsdatei exportiert wurde:

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

Erstellen Sie Ihre Flutter-Anwendung neu:
```
flutter run
```

Wenn Sie lieber ein Demoprojekt verwenden möchten, können Sie den Firebase-Emulator starten und Firebase in Ihrer lib/main.dart-Datei mit demoProjectId initialisieren (sie sollte mit demo- beginnen):

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

Schritt 4: Firebase-Plug-ins hinzufügen

Sie greifen in Ihrer Flutter-App über die verschiedenen Firebase Flutter-Plug-ins auf Firebase zu, eines für jedes Firebase-Produkt (z. B. Cloud Firestore, Authentication, Analytics usw.).

Da Flutter ein plattformübergreifendes Framework ist, ist jedes Firebase-Plug-in für Apple-, Android- und Webplattformen anwendbar. Wenn Sie Ihrer Flutter-App also ein Firebase-Plug-in hinzufügen, wird es von den Apple-, Android- und Webversionen Ihrer App verwendet.

So fügen Sie ein Firebase-Flutter-Plug-in hinzu:

Führen Sie im Verzeichnis Ihres Flutter-Projekts den folgenden Befehl aus:
```
flutter pub add PLUGIN_NAME
```
Führen Sie im Verzeichnis Ihres Flutter-Projekts den folgenden Befehl aus:
```
flutterfire configure
```
Durch Ausführen dieses Befehls wird sichergestellt, dass die Firebase-Konfiguration Ihrer Flutter-App auf dem neuesten Stand ist. Außerdem werden die erforderlichen Gradle-Plug-ins für Crashlytics und Performance Monitoring unter Android zu Ihrer App hinzugefügt.
Wenn Sie fertig sind, erstellen Sie Ihr Flutter-Projekt neu:
```
flutter run
```

Fertig! Ihre Flutter-Apps sind registriert und für die Verwendung von Firebase konfiguriert.

Besondere Überlegungen beim Erstellen von Web-Apps

Sehen Sie sich die folgenden Konfigurationsoptionen an, wenn Sie die Webplattform als Ziel verwenden.

Unterstützung für Trusted Types

Das Firebase SDK for Flutter unterstützt die Verwendung von Trusted Types, um DOM-basierte (clientseitige) XSS-Angriffe zu verhindern. Wenn Sie die Erzwingung von Trusted Types für Ihre App aktivieren, fügt das Firebase SDK seine Skripts mithilfe benutzerdefinierter Trusted Types-Richtlinien wie flutterfire-firebase_core, flutterfire-firebase_auth usw. in das DOM ein.

Automatische Einschleusung des Firebase JavaScript SDK deaktivieren

Standardmäßig wird das Firebase JavaScript SDK automatisch vom Firebase Flutter SDK eingefügt, wenn Sie eine Web-App erstellen. Wenn Sie nicht möchten, dass das Firebase JavaScript SDK automatisch eingefügt wird, können Sie Folgendes tun:

Ignorieren Sie das Auto-Injection-Skript, indem Sie das folgende Attribut in einem <script>-Tag in der Datei web/index.html in Ihrem Flutter-Projekt hinzufügen:

<!-- 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'];

Laden Sie das Skript manuell mit einer der folgenden Optionen:

Option 1: Fügen Sie das SDK explizit in der web/index.html-Datei im window.addEventListener-Callback hinzu:

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

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

Option 2: Laden Sie den Firebase JavaScript SDK-Code des Plug-ins von der Domain gstatic herunter und speichern Sie ihn in einer JavaScript-Datei, die in Ihrem Projekt aufbewahrt und manuell geladen wird:

  // "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

Verfügbare Plug-ins

Produkt	Plug‑in-Name	Andere Apple-Geräte (macOS usw.)	Windows
Firebase AI Logic ¹	`firebase_ai`	Beta
Analytics	`firebase_analytics`	Beta
App Check	`firebase_app_check`	Beta
Authentication	`firebase_auth`	Beta	Beta
Cloud Firestore	`cloud_firestore`	Beta	Beta
Cloud Functions	`cloud_functions`	Beta
Cloud Messaging	`firebase_messaging`	Beta
Cloud Storage	`firebase_storage`	Beta	Beta
Crashlytics	`firebase_crashlytics`	Beta
In-App Messaging	`firebase_in_app_messaging`
Firebase Installationen	`firebase_app_installations`	Beta
Performance Monitoring	`firebase_performance`
Realtime Database	`firebase_database`	Beta
Remote Config	`firebase_remote_config`	Beta
SQL Connect ²	`firebase_data_connect`
VERWORFENE ODER NICHT UNTERSTÜTZTE BIBLIOTHEKEN
Dynamic Links	`firebase_dynamic_links`
ML Model Downloader	`firebase_ml_model_downloader`	Beta

^{1 Firebase AI Logic hieß früher „Vertex AI in Firebase“ mit dem Plug-in firebase_vertexai.}

^{2 Firebase SQL Connect hieß früher „Firebase Data Connect“.}

Nächste Schritte

Sammeln Sie praktische Erfahrungen mit dem Firebase Flutter-Codelab.
Bereiten Sie die Veröffentlichung Ihrer App vor:
- Richten Sie in der Google Cloud-Konsole Budgetbenachrichtigungen für Ihr Projekt ein.
- Im Dashboard „Nutzung und Abrechnung“ in der Firebase-Konsole können Sie sich einen Überblick über die Nutzung Ihres Projekts in mehreren Firebase-Diensten verschaffen.
- Sehen Sie sich die Firebase-Checkliste für die Markteinführung an.