Erste Schritte mit Firebase in Ihrem Flutter-Projekt

Vorbereitung

• Installieren Sie den Editor oder die IDE Ihrer Wahl.

• 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 10.15

Möchtest du Cloud Messaging verwenden?

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

• Richten Sie ein physisches Apple-Gerät ein.
• Rufen Sie einen APNs-Authentifizierungsschlüssel (Apple Push Notification Service) für Ihr Apple-Entwicklerkonto ab.
• Aktivieren Sie Push-Benachrichtigungen in Xcode unter App > Capabilities.

Hinweis :Wenn Sie macOS oder macOS Catalyst als Ziel verwenden, müssen Sie Ihrem Ziel die Keychain Sharing-Funktion hinzufügen. Rufen Sie in Xcode den Tab Signieren & Funktionen Ihres Ziels auf und klicken Sie dann auf + Funktionen, um eine neue Funktion hinzuzufügen.

Android

• Richten Sie ein Gerät oder einen Emulator zum Ausführen Ihrer App ein. Emulatoren müssen ein Emulator-Image mit Google Play verwenden.

• Ihre App muss die folgenden Anforderungen erfüllen:

  • Die App ist auf API-Level 23 (Marshmallow) oder höher ausgerichtet.
  • Android 6.0 oder höher

Web

Keine plattformspezifischen Voraussetzungen

Wenn Sie noch keine Flutter-App haben, können Sie die Kurzanleitung durcharbeiten, um mit Ihrem bevorzugten Editor oder Ihrer bevorzugten IDE eine neue Flutter-App zu erstellen.

Schritt 1: Erforderliche Befehlszeilentools installieren

1. Installieren Sie das Firebase-CLI, falls noch nicht geschehen.

2. Melden Sie sich mit folgendem Befehl mit Ihrem Google-Konto in Firebase an:

   firebase login
   

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

Mit der FlutterFire-Befehlszeile können Sie Ihre Flutter-Apps so 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-CLI eine neue Firebase-App in Ihrem Firebase-Projekt.

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

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

  • Best Practices zum Hinzufügen von Apps zu einem Firebase-Projekt, einschließlich des Umgangs mit mehreren Varianten
  • Aktivieren Sie Google Analytics in Ihrem Projekt.Google Analytics bietet eine optimale Nutzung vieler Firebase-Produkte wie Crashlytics und Remote Config.

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

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

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

  Hinweis :Damit die FlutterFire-CLI 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 jedes Mal neu ausführen, wenn Sie Folgendes tun:

• 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 die Anmeldung mit Google, 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

1. Führen Sie im Verzeichnis Ihres Flutter-Projekts den folgenden Befehl aus, um das Core-Plug-in zu installieren:

   flutter pub add firebase_core
   

2. Führen Sie im Verzeichnis Ihres Flutter-Projekts den folgenden Befehl aus, um dafür zu sorgen, dass die Firebase-Konfiguration Ihrer Flutter-App auf dem neuesten Stand ist:

   flutterfire configure
   

3. Importieren Sie in Ihrer lib/main.dart-Datei das Firebase-Kern-Plug-in und die zuvor generierte Konfigurationsdatei:

   import 'package:firebase_core/firebase_core.dart';
   import 'firebase_options.dart';
   

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

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

5. 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. Für jedes Firebase-Produkt gibt es ein eigenes Plug-in (z. B. Cloud Firestore, Authentication, Analytics).

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:

1. Führen Sie im Verzeichnis Ihres Flutter-Projekts den folgenden Befehl aus:

   flutter pub add PLUGIN_NAME

2. Führen Sie im Verzeichnis Ihres Flutter-Projekts den folgenden Befehl aus:

   flutterfire configure
   

   Wenn Sie diesen Befehl ausführen, wird dafür gesorgt, dass die Firebase-Konfiguration Ihrer Flutter-App auf dem neuesten Stand ist. Außerdem werden für Crashlytics und Performance Monitoring unter Android die erforderlichen Gradle-Plug-ins zu Ihrer App hinzugefügt.

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

Unterstützung für vertrauenswürdige Typen

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

Automatische Injektion des Firebase JavaScript SDK deaktivieren

Standardmäßig wird das Firebase JavaScript SDK vom Firebase Flutter SDK automatisch eingefügt, wenn Sie eine Web-App erstellen. Wenn Sie nicht möchten, dass das Firebase JavaScript SDK automatisch eingefügt wird, haben Sie folgende Möglichkeiten:

1. Ignorieren Sie das Auto-Injection-Skript, indem Sie die folgende Eigenschaft 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'];
   

2. Laden Sie das Skript manuell mit einer der folgenden Optionen:

   • Option 1: Fügen Sie das SDK explizit in Ihre web/index.html-Datei ein, innerhalb des window.addEventListener-Callbacks:

       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: Laden Sie den Firebase JavaScript SDK-Code des Plugins von der Domain gstatic herunter und speichern Sie ihn in einer JavaScript-Datei, die in Ihrem Projekt gespeichert und manuell geladen werden soll:

       // "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	iOS	Android	Web	Andere Apple-Produkte (macOS usw.)	Windows
Firebase AI Logic ^1	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
SQL Connect ^2	firebase_data_connect
Dynamic Links	firebase_dynamic_links
In-App Messaging	firebase_in_app_messaging
Firebase-Installationen	firebase_app_installations				Beta
ML Model Downloader	firebase_ml_model_downloader				Beta
Performance Monitoring	firebase_performance
Realtime Database	firebase_database				Beta
Remote Config	firebase_remote_config				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“.}

Achtung: Firebase unter Windows ist nicht für Produktionsanwendungsfälle vorgesehen, sondern nur für lokale Entwicklungsabläufe.

---

Nächste Schritte

• Firebase Flutter-Codelab

• So bereiten Sie die Einführung Ihrer App vor:

  • Richten Sie in der Google Cloud Console Budgetbenachrichtigungen für Ihr Projekt ein.
  • Behalten Sie das Dashboard für Nutzung und Abrechnung in der Firebase-Konsole im Blick, um einen Überblick über die Nutzung Ihres Projekts in mehreren Firebase-Diensten zu erhalten.
  • Sehen Sie sich die Firebase-Start-Checkliste an.