Firebase 和 Flutter 使用入门

如果您有一款 Flutter 应用并希望将 Firebase 添加至该应用,或者如果您已经在使用 Firebase 并且想了解如何利用 Flutter 来构建原生移动应用,那么本文档便适合您。

前提条件

Flutter

您需要为 Flutter 安装以下软件:

如果您尚无 Flutter 应用,请按照使用入门:体验服务构建一款新的 Flutter 应用。相关说明因编辑器不同而异。如果您在使用 IDE,则新应用通常称作项目

Firebase

您应该注册一个 Firebase 帐号。如果您的目的是开发,使用免费方案即可。

创建 Firebase 项目

您需要创建一个 Firebase 项目,以便将您的 Flutter 应用与该项目进行关联:

  1. 转到 Firebase 控制台,并点击添加项目
  2. 为您的项目命名(例如“我的 Firebase Flutter 应用”),并将国家/地区设为您的公司或组织所在的位置。然后,点击创建项目
  3. 很快您的项目便会创建完毕。点击继续

针对具体平台的 Firebase 配置

在创建 Firebase 项目后,您可以配置一款(或多款)应用来使用该项目。为此,请在 Firebase 中注册针对具体平台的应用 ID,并为您的应用生成配置文件。

如果您的 Flutter 应用将同时在 iOS 和 Android 上发布,则请在同一 Firebase 项目中注册 iOS 和 Android 版本。否则,请跳过不必要的部分。

在 Flutter 应用的顶层目录中,iosandroid 目录中包含针对具体平台(iOS 和 Android)的配置文件。

配置 iOS

  1. Firebase 控制台中,确保在左侧导航栏中选择 Project Overview(项目概览),然后点击将 Firebase 添加到您的 iOS 应用。此时会出现一个对话框。首先,您需要按以下两个步骤填写必需的 iOS 软件包 ID。(了解关于软件包 ID 的更多信息。)
  2. 在终端窗口中,转到 Flutter 应用的顶层目录,然后运行命令 open ios/Runner.xcworkspace 以打开 Xcode。(了解关于 Xcode 属性列表的更多信息。)
  3. 在 Xcode 中,点击左侧窗格中的顶级 Runner 标签,以在右侧窗格中显示 General 标签,如下图所示。复制 Bundle Identifier。“yourcompany”和“yourproject”的实际值取决于您在构建 Flutter 应用时指定的内容。 XcodeBundle Identifier 粘贴到 Firebase 控制台中的 iOS 软件包 ID 字段中,然后点击注册应用
  4. 在下一页中,按照说明下载文件 GoogleService-Info.plist
  5. 在 Xcode 中,您会看到 Runner 还有一个名为 Runner 的子文件夹(如上图所示)。将 GoogleService-Info.plist 文件(从下载后保存的位置)拖放到这一 Runner 子文件夹中。
  6. 返回 Firebase 控制台,点击下一步,然后跳过其余步骤以返回 Firebase 控制台的主页面。

配置 Android

  1. 在 Firebase 控制台中,确保在左侧导航栏中选择 Project Overview(项目概览),然后点击将 Firebase 添加到您的 Android 应用。如果您已添加应用(例如前面部分提到的 iOS 应用),请点击添加其他应用以继续添加应用。此时会出现一个对话框。
  2. 在 Flutter 应用目录中,打开文件 android/app/src/main/AndroidManifest.xmlmanifest 元素的 package 属性的字符串值是 Android 软件包名称(类似于 com.yourcompany.yourproject)。复制该值。在 Firebase 中,将复制的软件包名称粘贴到 Android 软件包名称字段中。(了解关于软件包和应用 ID 的更多信息。)
  3. 可选:如果您计划使用 Google 登录Firebase 动态链接,则需要填写调试签名证书 SHA-1 字段。按照对客户端进行身份验证指南中的说明获取调试证书指纹值,并将其粘贴到相应字段中。
  4. 点击注册应用
  5. 在下一页中,按照说明下载文件 google-services.json。接着将 google-services.json 文件移动到 Flutter 应用的 android/app 目录中。
  6. 在 Firebase 中,您可以跳过其余步骤以返回 Firebase 主控制台。
  7. 最后,您需要使用 Google 服务 Gradle 插件来读取 Firebase 生成的 google-services.json 文件。在 IDE 或编辑器中,打开 android/app/build.gradle,并将以下行添加为文件中的最后一行:
    apply plugin: 'com.google.gms.google-services'
    android/build.gradle 中的 buildscript 标记内添加一个新依赖项:
    buildscript {
        repositories {
            // ,,,
        }
        dependencies {
            // ...
            classpath 'com.google.gms:google-services:3.2.1'   // new
        }
    }
    备注“new”只是为了指出该行是新增的行。 确保新依赖项与另一个 classpath 完全一致。此行指定了插件的版本 3.2.1(此时请勿使用版本 3.3.0 或 3.3.1)。如需了解详情,请参阅将 Firebase 添加到您的 Android 项目文档中的添加 SDK 部分(但请勿按照其中的说明进行操作,因为这些说明与 Flutter 说明不同)。

现在,您的 Flutter 应用应该已与 Firebase 相关联。

添加 FlutterFire 插件

Flutter 提供了各种插件,供用户用来访问针对具体平台的各种服务(包括 Firebase API)。插件包括针对具体平台的代码,用于访问各种平台上的服务和 API。

Firebase 可通过许多不同的库访问,每个库对应一种 Firebase 产品(例如数据库、身份验证、分析、存储)。Flutter 针对各种 Firebase 产品的访问分别提供了各种插件,这组插件统称为 FlutterFire。请务必查看 FlutterFire GitHub 页面,以了解最新的 FlutterFire 插件列表。

添加 Analytics(可选)

本文档的剩余部分为选读内容;这部分介绍如何修改您的应用,以添加 Google Analytics for Firebase。要验证 Firebase 与 Flutter 能否正常配合,相对简单的一种方法便是添加 Analytics。此外,向 Flutter 应用添加 Analytics 大有裨益,因为 Analytics 在开发和调试过程中非常有用,并且可帮助跟踪已发布应用的表现。

  1. firebase_analytics 插件添加到 pubspec.yaml 文件中。
    dependencies:
      flutter:
        sdk: flutter
      firebase_analytics: ^0.3.3     # new
    
  2. 运行 flutter packages get。如需详细了解如何管理软件包和插件,请参阅使用软件包

Analytics 应用示例

与所有软件包一样,firebase_analytics 插件也带有示例程序

  1. 从 firebase_analytics 示例程序库中复制文件 main.darttabs_page.dart,并将它们粘贴到 Flutter 应用的 lib 目录中,以替换现有 main.dart 文件。
  2. 运行 Flutter 应用。
  3. 打开您项目的 Firebase 控制台。 在分析下,点击 Dashboard(信息中心)。 Analytics 信息中心 信息中心的“过去 30 分钟的活跃用户数”面板中,应该会显示一名活跃用户(这可能需要一段时间)。显示该信息即可确认 Analytics 正在正常工作。您还可以通过启用 DebugView 来查看示例程序所生成的所有事件。如需详细了解如何设置 Analytics,请参阅适用于 iOSAndroid 的入门指南。

关于 Firebase 和 Flutter 的更多信息

发送以下问题的反馈:

此网页
需要帮助?请访问我们的支持页面