將 Firebase 新增至 Flutter 應用程式


事前準備

如果您還沒有 Flutter 應用程式,可以完成「開始使用:試用版」,使用偏好的編輯器或 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 物件初始化 Firebase:

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

    flutter run
    

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

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

步驟 4:新增 Firebase 外掛程式

您可以透過各種 Firebase Flutter 外掛程式 (例如 Cloud FirestoreAuthenticationAnalytics 等) 存取 Flutter 應用程式中的 Firebase。

由於 Flutter 是跨平台架構,因此每個 Firebase 外掛程式都適用於 Apple、Android 和網頁平台。因此,如果您在 Flutter 應用程式中新增任何 Firebase 外掛程式,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 版
Data Connect firebase_data_connect
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網頁的入門指南。

後續步驟