將 Firebase 新增至 Flutter 應用程式


事前準備

如果您尚未安裝 Flutter 應用程式,可以使用 Get 已開始:進行測試 使用偏好的編輯器或 IDE 建立新的 Flutter 應用程式。

步驟 1:安裝必要的指令列工具

  1. 如果還沒試過 安裝 Firebase CLI

  2. 請按照下列步驟操作,使用您的 Google 帳戶登入 Firebase 指令:

    firebase login
    
  3. 從任何瀏覽器執行下列指令,安裝 FlutterFire CLI 目錄:

    dart pub global activate flutterfire_cli
    

步驟 2:設定應用程式以使用 Firebase

使用 FlutterFire CLI 設定 Flutter 應用程式,以便連結至 Firebase。

在 Flutter 專案目錄中執行下列指令,以啟動 應用程式設定工作流程:

flutterfire configure


步驟 3:在應用程式中初始化 Firebase

  1. 從 Flutter 專案目錄執行下列指令,以安裝 核心外掛程式:

    flutter pub add firebase_core
    
  2. 在 Flutter 專案目錄中執行下列指令,確保 因此 Flutter 應用程式的 Firebase 設定已是最新版本:

    flutterfire configure
    
  3. lib/main.dart 檔案中,匯入 Firebase 核心外掛程式,以及 設定檔

    import 'package:firebase_core/firebase_core.dart';
    import 'firebase_options.dart';
    
  4. 此外,在您的 lib/main.dart 檔案中,使用 設定檔匯出的 DefaultFirebaseOptions 物件:

    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.currentPlatform,
    );
    
  5. 重新建構 Flutter 應用程式:

    flutter run
    

如果您想使用示範專案,可以啟動 Firebase Emulator, 在您的 lib/main.dart 檔案中,使用 demoProjectId 初始化 Firebase (開頭應為 demo-):

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

步驟 4:新增 Firebase 外掛程式

您可以透過多種工具在 Flutter 應用程式中存取 Firebase Firebase Flutter 外掛程式,每個 Firebase 產品各一個外掛程式 (例如:Cloud FirestoreAuthenticationAnalytics 等)。

由於 Flutter 是跨平台架構,因此每個 Firebase 外掛程式都適用於 Apple、Android 和網頁平台。因此,如果您將任何 Firebase 外掛程式 您的 Flutter 應用程式,它也會供 Apple、Android 和網頁版的

新增 Firebase Flutter 外掛程式的方法如下:

  1. 在 Flutter 專案目錄中執行下列指令:

    flutter pub add PLUGIN_NAME
  2. 在 Flutter 專案目錄中執行下列指令:

    flutterfire configure
    

    執行這個指令可確保 Flutter 應用程式的 Firebase 設定 是最新版本,Android 上的 CrashlyticsPerformance Monitoring 會新增 需要為您的應用程式加入必要的 Gradle 外掛程式

  3. 完成後,請重新建構 Flutter 專案:

    flutter run
    

大功告成!Flutter 應用程式已註冊並設為使用 Firebase。

可用的外掛程式

產品 外掛程式名稱 iOS Android 網路 其他 Apple
(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 版
Dynamic Links firebase_dynamic_links
In-App Messaging firebase_in_app_messaging
安裝次數:Firebase firebase_app_installations
Beta 版
機器學習模型下載工具 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 版

透過 Analytics 試用範例應用程式

和所有套件一樣,firebase_analytics 外掛程式隨附 範例計畫

  1. 開啟您已設定使用 Firebase 的 Flutter 應用程式 (請參閱 請參閱本頁的操作說明)。

  2. 存取應用程式的 lib 目錄,然後刪除現有的 main.dart 檔案。

  3. 來自「Google Analytics範例程式存放區 請複製下列兩個檔案,並貼到應用程式的 lib 目錄中:

    • main.dart
    • tabs_page.dart
  4. 執行 Flutter 應用程式。

  5. Firebase 控制台中,前往應用程式的 Firebase 專案,然後按一下 按一下左側導覽面板中的 [Analytics]

    1. 按一下 資訊主頁。 如果 Analytics 運作正常,資訊主頁會顯示活躍使用者 在「過去 30 分鐘的活躍使用者」中面板 (這可能需要 可填入面板的時間)。

    2. 按一下「DebugView。啟用這項功能: 查看範例程式產生的所有事件。

如要進一步瞭解如何設定 Analytics,請參閱入門指南 指南 (iOS+), Android網頁

後續步驟