将 Firebase 添加到您的 Flutter 应用

前提条件

• 安装您偏好的编辑器或 IDE。

• 为您的特定操作系统安装 Flutter，包括安装以下各项：

  • Flutter SDK
  • 支持库
  • 针对具体平台的软件和 SDK

• 使用您的 Google 账号登录 Firebase。

如果您还没有 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 模拟器，然后在 lib/main.dart 文件中使用 demoProjectId（应以 demo- 开头）初始化 Firebase：

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

第 4 步：添加 Firebase 插件

您可以通过各种 Firebase Flutter 插件（每个插件对应一种 Firebase 产品，例如 Cloud Firestore、Authentication、Analytics 等）在 Flutter 应用中访问 Firebase。

由于 Flutter 是一个多平台框架，因此每个 Firebase 插件都同时适用于 Apple、Android 和 Web 平台。也就是说，如果您将任何 Firebase 插件添加到 Flutter 应用，则 Apple 版、Android 版和 Web 版应用都会使用该插件。

添加 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 服务。

可用的插件

^{1 Firebase AI Logic 以前称为“Vertex AI in Firebase”，并使用插件 firebase_vertexai。}

通过 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 和 Web 平台的入门指南。

有关构建 Web 应用的备注

可信类型支持

Firebase SDK for Flutter 支持使用可信类型来防范基于 DOM 的（客户端）XSS 攻击。当您为应用启用可信类型强制执行时，Firebase SDK 会使用名为 flutterfire-firebase_core、flutterfire-firebase_auth 等等的自定义可信类型政策，将其脚本注入 DOM 中。

停用 Firebase JavaScript SDK 自动注入功能

默认情况下，Firebase Flutter SDK 在针对 Web 构建时会自动注入 Firebase JavaScript SDK。如果您不希望自动注入 Firebase JavaScript SDK，可以执行以下操作：

1. 通过在 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'];
   

2. 使用以下替代方法之一手动加载脚本：

   • 将该 SDK 明确添加到 web/index.html 文件的 window.addEventListener 回调中：

       window.addEventListener('load', async function (ev) {
         window.firebase_firestore = await import("https://www.gstatic.com/firebasejs/12.6.0/firebase-firestore.js");
         window.firebase_analytics = await import("https://www.gstatic.com/firebasejs/12.6.0/firebase-analytics.js");
     
         _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
           // rest of the code
     

   • 或者，从“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
     

后续步骤

• 借助 Firebase Flutter Codelab 获得实际上手经验。

• 准备发布您的应用：

  • 在 Google Cloud 控制台中为您的项目设置预算提醒。
  • 在 Firebase 控制台中监控“用量和结算”信息中心，以全面了解您的项目在多个 Firebase 服务中的用量信息。
  • 查看 Firebase 发布核对清单。