Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

在 Flutter 專案中開始使用 Firebase

事前準備

安裝慣用的編輯器或 IDE。
安裝 Flutter，適用於特定作業系統，包括：
- Flutter SDK
- 支援的程式庫
- 平台專屬軟體和 SDK

平台專屬先決條件：

Apple

設定實體 Apple 裝置，或使用模擬器執行應用程式。
請確認 Flutter 應用程式以下列平台版本或更新版本為目標：
- iOS 15
- macOS 10.15

要使用「Cloud Messaging」嗎？

如要在 Apple 平台上使用 Cloud Messaging，請先確認是否符合下列必要條件：

設定實體 Apple 裝置。

為Apple 開發人員帳戶取得 Apple 推播通知驗證金鑰。

在 Xcode 中依序前往「App」>「Capabilities」，啟用推播通知。

Android

設定裝置或模擬器，以便執行應用程式。模擬器必須使用含有 Google Play 的模擬器映像檔。
請確認應用程式符合下列規定：
- 指定 API 級別 23 (Marshmallow) 以上版本
- 搭載 Android 6.0 以上版本

網頁版

沒有平台專屬的先決條件

如果還沒有 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、Web)。針對選取的每個平台，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

在 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 模擬器，並在 lib/main.dart 檔案中使用 demoProjectId 初始化 Firebase (應以 demo- 開頭)：

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

步驟 4：新增 Firebase 外掛程式

您可以在 Flutter 應用程式中透過各種 Firebase 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。

建構網頁應用程式的特別注意事項

支援 Trusted Types

Firebase SDK for Flutter 支援使用 Trusted Types，有助於防範 DOM 型 (用戶端) XSS 攻擊。為應用程式啟用強制執行信任類型時，Firebase SDK 會使用自訂信任類型政策 (名為 flutterfire-firebase_core、flutterfire-firebase_auth 等) 將指令碼插入 DOM。

停用 Firebase JavaScript SDK 自動插入功能

根據預設，為網頁建構時，Firebase Flutter SDK 會自動插入 Firebase JavaScript SDK。如不希望系統自動插入 Firebase JavaScript SDK，請採取下列做法：

在 Flutter 專案的 web/index.html 檔案中，於 <script> 標記內新增下列屬性，即可忽略自動插入的指令碼：

<!-- Add this property inside a <script> tag within your "web/index.html" file in your Flutter project -->
<!-- Put in the names of all the plugins you wish to ignore: -->
window.flutterfire_ignore_scripts = ['analytics', 'firestore'];

使用下列其中一種方式手動載入指令碼：

選項 1：在 window.addEventListener 回呼中，將 SDK 明確新增至 web/index.html 檔案：

  window.addEventListener('load', async function (ev) {
    window.firebase_firestore = await import("https://www.gstatic.com/firebasejs/12.13.0/firebase-firestore.js");
    window.firebase_analytics = await import("https://www.gstatic.com/firebasejs/12.13.0/firebase-analytics.js");

    _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
      // rest of the code

選項 2：從 gstatic 網域下載外掛程式的 Firebase JavaScript SDK 程式碼，並儲存至 JavaScript 檔案，以便保留在專案中並手動載入：

  // "web/my-analytics.js" & "web/my-firestore.js" file loaded as a script into your "web/index.html" file:
  window.addEventListener('load', async function (ev) {
    window.firebase_analytics = await import("./my-analytics.js");
    window.firebase_firestore = await import("./my-firestore.js");

    _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
      // rest of the code

可用的外掛程式

產品	外掛程式名稱	其他 Apple 裝置 (macOS 等)	Windows
Firebase AI Logic ¹	`firebase_ai`	Beta 版
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 版
SQL 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 版

^{1 Firebase AI Logic 以前稱為「Vertex AI in Firebase」，外掛程式為 firebase_vertexai。}

^{2 Firebase SQL Connect 舊稱「Firebase Data Connect」}

後續步驟

透過 Firebase Flutter 程式碼研究室獲得實作經驗。
準備發布應用程式：
- 在 Google Cloud 控制台中，為專案設定預算快訊。
- 在 Firebase 控制台中監控「用量和帳單」資訊主頁，全面掌握專案在多項 Firebase 服務中的用量。
- 詳閱 Firebase 發布檢查清單。