將 Firebase 新增至 Flutter 應用程式

將 Firebase 新增至 Flutter 應用程式

iOS 以上版本 Android 網頁

事前準備

• 安裝偏好的 編輯器或 IDE。

• 針對特定的 執行，包括：

  • Flutter SDK
  • 支援的程式庫
  • 平台專用的軟體和 SDK

• 使用 Google 帳戶登入 Firebase 讓他們使用服務帳戶

如果您尚未安裝 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

這項flutterfire configure功能 工作流程為何？

flutterfire configure 工作流程會執行下列作業：

• 系統會請您選取 Flutter 應用程式。FlutterFire CLI 會針對每個所選平台建立新的 Firebase 專案中的 Firebase 應用程式。

  你可以選擇使用現有的 Firebase 專案，或是建立 新的 Firebase 專案如果您在現有 Firebase 專案，FlutterFire CLI 會嘗試根據 目前的 Flutter 專案設定

  注意：以下提示有助您設定和 管理 Firebase 專案：

  • 請參閱我們的 最佳做法 在 Firebase 專案中新增應用程式，包括處理 多個變化版本
  • 啟用「Google Analytics」 可讓您在專案中使用 許多 Firebase 產品，例如 Crashlytics 和 Remote Config。

• 建立並新增 Firebase 設定檔 (firebase_options.dart) 至 lib/ 目錄。

  注意： 這個 Firebase 設定檔含有不重複的非私密資訊 指定各個平台的 ID
  前往「瞭解 Firebase 專案 進一步瞭解這個設定檔。

• (適用於 Android 的 Crashlytics 或 Performance Monitoring) 新增必要欄位 產品專屬的 Gradle 外掛程式，新增至 Flutter 應用程式。

  注意： 如要在 FlutterFire CLI 新增適當的 Gradle 外掛程式， 產品的 Flutter 外掛程式必須已匯入 Flutter 應用程式。

首次執行 flutterfire configure，您需要隨時重新執行該指令 您：

• 開始在 Flutter 應用程式中支援新平台。
• 開始在 Flutter 應用程式中使用新的 Firebase 服務或產品。 尤其是如果您開始使用 Google 帳戶登入功能 (Crashlytics) Performance Monitoring 或 Realtime Database。

請重新執行指令，確保 Flutter 應用程式的 Firebase 就是最新版本，且 (適用於 Android 裝置) 會自動新增任何 需要為您的應用程式加入必要的 Gradle 外掛程式

步驟 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 Firestore、Authentication、Analytics 等)。

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

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

1. 在您的 Flutter 專案目錄中執行下列指令：

   flutter pub add PLUGIN_NAME

2. 在您的 Flutter 專案目錄中執行下列指令：

   flutterfire configure
   

   執行這個指令可確保 Flutter 應用程式的 Firebase 設定 是最新版本，Android 上的 Crashlytics 和 Performance 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 版

注意： Windows 版 Firebase 僅用於本機開發工作流程，不適用於正式環境。

透過 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 和 網頁。

後續步驟

• 實際操作 Firebase Flutter 程式碼研究室。

• 準備推出應用程式：

  • 設定預算 快訊 。Google Cloud.
  • 監控用量與計費 資訊主頁 前往 Firebase 控制台查看專案的整體概況 以及跨多項 Firebase 服務的用量
  • 查看 Firebase 發布檢查清單。