Firebase zu Ihrer Flutter-App hinzufügen


Vorbereitung

  • Installieren Sie Ihren bevorzugten Editor oder Ihre bevorzugte IDE.

  • Richten Sie ein physisches Apple-Gerät ein oder verwenden Sie einen Simulator, um Ihre App auszuführen.

  • Achten Sie darauf, dass Ihre Flutter-App auf die folgenden oder höherwertigen Plattformversionen ausgerichtet ist:

    • iOS 13
    • macOS 10.15

  • Installieren Sie Flutter für Ihr Betriebssystem, z. B.:

    • Flutter SDK
    • Unterstützte Bibliotheken
    • Plattformspezifische Software und SDKs

  • Melden Sie sich mit Ihrem Google-Konto in Firebase an.

Wenn Sie noch keine Flutter-App haben, können Sie mit Einstieg: Testfahrt eine neue Flutter-App mit Ihrem bevorzugten Editor oder Ihrer bevorzugten IDE erstellen.

Schritt 1: Erforderliche Befehlszeilentools installieren

  1. Installieren Sie die Firebase-Befehlszeile, falls noch nicht geschehen.

  2. Melden Sie sich mit Ihrem Google-Konto in Firebase an. Führen Sie dazu den folgenden Befehl aus:

    firebase login

  3. Führen Sie den folgenden Befehl in einem beliebigen Verzeichnis aus, um die FlutterFire CLI zu installieren:

    dart pub global activate flutterfire_cli

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

Mit der FlutterFire CLI können Sie Ihre Flutter-Apps so konfigurieren, dass sie eine Verbindung zu Firebase herstellen.

Führen Sie im Flutter-Projektverzeichnis den folgenden Befehl aus, um den App-Konfigurationsablauf zu starten:

flutterfire configure


Schritt 3: Firebase in Ihrer App initialisieren

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

    flutter pub add firebase_core

  2. Führen Sie im Flutter-Projektverzeichnis den folgenden Befehl aus, um sicherzustellen, dass die Firebase-Konfiguration Ihrer Flutter-App auf dem neuesten Stand ist:

    flutterfire configure

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

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

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

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

  5. So 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 (die Datei sollte mit demo- beginnen):

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

Schritt 4: Firebase-Plug-ins hinzufügen

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

Da Flutter ein plattformübergreifendes Framework ist, kann jedes Firebase-Plug-in für Apple-, Android- und Webplattformen verwendet werden. Wenn Sie also Ihrer Flutter-App 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 Flutter-Projektverzeichnis den folgenden Befehl aus:

    flutter pub add PLUGIN_NAME

  2. Führen Sie im Flutter-Projektverzeichnis den folgenden Befehl aus:

    flutterfire configure

    Wenn Sie diesen Befehl ausführen, wird die Firebase-Konfiguration Ihrer Flutter-App auf den neuesten Stand gebracht und Ihrer App werden die erforderlichen Gradle-Plug-ins für Crashlytics und Performance Monitoring auf Android hinzugefügt.

  3. Erstellen Sie anschließend Ihr Flutter-Projekt neu:

    flutter run

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

Verfügbare Plug-ins

Produkt Name des Plug-ins iOS Android Web Andere Apple-Geräte
(z. B. macOS)		 Windows
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
Data Connect firebase_data_connect
Dynamic Links firebase_dynamic_links
In-App Messaging firebase_in_app_messaging
Firebase Installationen firebase_app_installations
Beta
ML-Modell-Downloader firebase_ml_model_downloader
Beta
Performance Monitoring firebase_performance
Realtime Database firebase_database
Beta
Remote Config firebase_remote_config
Beta
Vertex AI in Firebase firebase_vertexai
Beta

Beispiel-App mit Analytics ausprobieren

Wie alle Pakete enthält auch das firebase_analytics-Plug-in ein Beispielprogramm.

  1. Öffnen Sie eine Flutter-App, die Sie bereits für die Verwendung von Firebase konfiguriert haben (siehe Anleitung auf dieser Seite).

  2. Rufen Sie das Verzeichnis lib der App auf und löschen Sie die vorhandene Datei main.dart.

  3. Kopieren Sie die folgenden beiden Dateien aus dem Google Analytics-Beispielprogramm-Repository in das Verzeichnis lib Ihrer App:

    • main.dart
    • tabs_page.dart

  4. Führen Sie Ihre Flutter-App aus.

  5. Rufen Sie in der Firebase Console das Firebase-Projekt Ihrer App auf und klicken Sie dann links im Navigationsbereich auf Analytics.

    1. Klicken Sie auf Dashboard. Wenn Analytics ordnungsgemäß funktioniert, wird im Dashboard im Bereich „In den letzten 30 Minuten aktive Nutzer“ ein aktiver Nutzer angezeigt. Es kann einige Zeit dauern, bis dieser Bereich gefüllt ist.

    2. Klicken Sie auf DebugView. Aktivieren Sie die Funktion, um alle vom Beispielprogramm generierten Ereignisse zu sehen.

Weitere Informationen zum Einrichten von Analytics finden Sie in den Einführungsleitfäden für iOS +, Android und Web.

Nächste Schritte