將 Firebase 新增至 Flutter 應用程式
事前準備
安裝偏好的編輯器或 IDE。
設定實體 Apple 裝置,或使用模擬器執行應用程式。
請問要使用 Cloud Messaging 嗎?
針對 Apple 平台上的 Cloud Messaging,以下是必要條件:
- 設定 實體 Apple 裝置。
- 取得 Apple Developer 帳戶的 Apple 推播通知驗證金鑰。
- 在 Xcode 中依序前往「App」>「Capabilities」,啟用推播通知。
請確認您的 Flutter 應用程式指定以下平台版本或更高版本:
- iOS 13
- macOS 10.15
安裝 Flutter 適用於您的作業系統,包括:
- Flutter SDK
- 支援的程式庫
- 特定平台的軟體和 SDK
使用 Google 帳戶登入 Firebase。
如果您還沒有 Flutter 應用程式,可以完成「開始使用:試用版」,使用偏好的編輯器或 IDE 建立新的 Flutter 應用程式。
步驟 1:安裝必要的指令列工具
如果您尚未安裝,請安裝 Firebase CLI。
執行下列指令,使用 Google 帳戶登入 Firebase:
firebase login
請從任何目錄執行下列指令,安裝 FlutterFire CLI:
dart pub global activate flutterfire_cli
步驟 2:將應用程式設為使用 Firebase
使用 FlutterFire CLI 設定 Flutter 應用程式,以便連結至 Firebase。
在 Flutter 專案目錄中執行下列指令,即可啟動應用程式設定工作流程:
flutterfire configure
這個 flutterfire configure
工作流程有什麼功能?
flutterfire configure
工作流程會執行以下操作:
要求您選取 Flutter 應用程式支援的平台 (iOS、Android、網頁)。對於每個所選平台,FlutterFire CLI 都會在 Firebase 專案中建立新的 Firebase 應用程式。
您可以選擇使用現有的 Firebase 專案,或建立新的 Firebase 專案。如果您已在現有的 Firebase 專案中註冊應用程式,FlutterFire CLI 會根據您目前的 Flutter 專案設定,嘗試比對這些應用程式。
建立 Firebase 設定檔 (
firebase_options.dart
),並將其新增至lib/
目錄。(適用於 Android 上的 Crashlytics 或 Performance Monitoring) 在 Flutter 應用程式中加入所需的產品專屬 Gradle 外掛程式。
步驟 3:在應用程式中初始化 Firebase
在 Flutter 專案目錄中執行下列指令,安裝核心外掛程式:
flutter pub add firebase_core
請在 Flutter 專案目錄中執行下列指令,確保 Flutter 應用程式的 Firebase 設定為最新版本:
flutterfire configure
在
lib/main.dart
檔案中,匯入 Firebase 核心外掛程式和先前產生的設定檔:import 'package:firebase_core/firebase_core.dart'; import 'firebase_options.dart';
在
lib/main.dart
檔案中,使用設定檔匯出的DefaultFirebaseOptions
物件初始化 Firebase:WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); runApp(const MyApp());
重新建構 Flutter 應用程式:
flutter run
如果您想使用示範專案,可以啟動 Firebase Emulator,並在 lib/main.dart
檔案中使用 demoProjectId
(應以 demo-
開頭) 初始化 Firebase:
await Firebase.initializeApp(
demoProjectId: "demo-project-id",
);
步驟 4:新增 Firebase 外掛程式
您可以透過各種 Firebase Flutter 外掛程式存取 Flutter 應用程式中的 Firebase,每個 Firebase 產品都有一個外掛程式 (例如:Cloud Firestore、Authentication、Analytics 等)。
由於 Flutter 是跨平台架構,因此每個 Firebase 外掛程式都適用於 Apple、Android 和網頁平台。因此,如果您在 Flutter 應用程式中新增任何 Firebase 外掛程式,Apple、Android 和網頁版應用程式都會使用該外掛程式。
以下說明如何新增 Firebase Flutter 外掛程式:
在 Flutter 專案目錄中執行下列指令:
flutter pub add
PLUGIN_NAME 在 Flutter 專案目錄中執行下列指令:
flutterfire configure
執行這項指令可確保 Flutter 應用程式的 Firebase 設定為最新版本,並在 Android 上的 Crashlytics 和 Performance Monitoring 中,將必要的 Gradle 外掛程式新增至應用程式。
完成後,請重新建構 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
外掛程式會隨附範例程式。
開啟已設定為使用 Firebase 的 Flutter 應用程式 (請參閱本頁的操作說明)。
存取應用程式的
lib
目錄,然後刪除現有的main.dart
檔案。從 Google Analytics 範例程式存放區中,將下列兩個檔案複製貼到應用程式的
lib
目錄:main.dart
tabs_page.dart
執行 Flutter 應用程式。
在 Firebase 主控台中前往應用程式的 Firebase 專案,然後按一下左側導覽面板中的「數據分析」。
如要進一步瞭解如何設定 Analytics,請參閱 iOS+、Android 和 網頁的入門指南。
後續步驟
透過 Firebase Flutter Codelab 實際操作。
準備發布應用程式:
- 在 Google Cloud 控制台中為專案設定預算快訊。
- 請在 Firebase 控制台中監控使用量和帳單資訊主頁,全面掌握專案在多項 Firebase 服務中的用量。
- 詳閱 Firebase 上市檢查清單。