將 Firebase 新增至 Flutter 應用程式
事前準備
安裝偏好的編輯器或 IDE。
設定實體 Apple 裝置,或使用模擬器執行應用程式。
請確認您的 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
步驟 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 上市檢查清單。