如何用FlutterFire CLI将Firebase添加到Flutter应用中?

874 阅读4分钟

在Flutter应用中添加Firebase曾经涉及到很多特定平台的手动配置步骤。

但随着Flutter 2.8的发布,我们现在可以直接从Dart初始化Firebase。

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart'; // generated via `flutterfire` CLI

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(MyApp());
}

这是由新的**FlutterFire CLI**工具实现的,它可以为我们的项目生成正确的Firebase配置。

由于FlutterFire CLI的文档非常简陋,我写了这个指南来涵盖所有的设置步骤。

作为奖励,我们将看到如何配置一个具有多种口味和Firebase环境的Flutter应用程序。

准备好了吗?让我们开始吧!

1.安装Firebase和FlutterFire CLI

由于**FlutterFire CLI**是一个命令行工具,我们需要先安装它。

dart pub global activate flutterfire_cli

我们还需要安装**Firebase CLI**工具。最简单的方法是通过运行。

npm install -g firebase-tools

Firebase CLI提供了各种工具,从命令行测试、管理和部署你的Firebase项目。更多信息请参见官方文档GitHub页面

2.创建一个新的Flutter应用程序

接下来,我们可以在命令行中创建一个新的Flutter应用(如果你想把Firebase添加到现有的Flutter应用中,就跳过这一步)。

flutter create my_test_app

默认情况下,这个应用将在main() 方法里面有默认的启动代码。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

3.创建一个新的Firebase项目

如果我们还没有一个Firebase项目,我们有两个选择。

根据我的经验,最好是选择选项1,因为flutterfire 在创建项目时有时会出现这样的错误。

FirebaseCommandException: An error occured on the Firebase CLI when attempting to run a command.

所以让我们从Firebase控制台添加一个新的项目。

创建一个新的Firebase项目

第1步是选择一个项目名称。

创建一个新的Firebase项目(第1步)

在第2步,我们可以禁用Google Analytics,因为我们不需要它。

创建一个新的Firebase项目(第2步)

4.用FlutterFire CLI添加Firebase项目

一旦我们创建了Firebase项目,我们就可以回到命令行并运行。

flutterfire configure

假设我们已经通过Firebase CLI登录了(如果没有,请运行firebase login ),这将列出所有可用的Firebase项目。

i Found 18 Firebase projects.
? Select a Firebase project to configure your Flutter application with › 
  ...
  code-with-andrea-flutter (code-with-andrea-flutter)
  flutterfire-flavors-dev (flutterfire-flavors-dev)
  flutterfire-test-549e9 (flutterfire-test)
  ...
❯ my-test-app-a4ff9
  <create a new project>

从这里,我们可以选择我们刚刚创建的项目并点击回车。

然后,我们可以选择我们想要支持的平台。

? Which platforms should your configuration support (use arrow keys & space to select)? › 
✔ android
✔ ios
✔ macos
✔ web

CLI会自动为我们需要的所有平台注册一个Firebase应用。

i Firebase android app com.example.my_test_app is not registered on Firebase project my-test-app-a4ff9.
i Registered a new Firebase android app on Firebase project my-test-app-a4ff9.
i Firebase ios app com.example.myTestApp is not registered on Firebase project my-test-app-a4ff9.
i Registered a new Firebase ios app on Firebase project my-test-app-a4ff9.
i Firebase macos app com.example.myTestApp is already registered.
i Firebase web app my_test_app (web) is not registered on Firebase project my-test-app-a4ff9.
i Registered a new Firebase web app on Firebase project my-test-app-a4ff9.

Firebase configuration file lib/firebase_options.dart generated successfully with the following Firebase apps:

Platform  Firebase App Id
web       1:940076056012:web:45e6683f0fce24f30bf169
android   1:940076056012:android:9df898bb4eb8c8a50bf169
ios       1:940076056012:ios:0747c8a0cbed9aaf0bf169
macos     1:940076056012:ios:0747c8a0cbed9aaf0bf169

Learn more about using this file in the FlutterFire documentation:
 > https://firebase.flutter.dev/docs/cli

作为证明,我们可以打开Firebase项目设置,看到有3个应用已经被创建。

在项目设置中创建的Firebase应用

5.在Flutter应用中初始化Firebase

完成上面的步骤后,我们会发现在lib 里面有一个新的文件,叫做firebase_options.dart

至少,我们需要将firebase_core 添加到我们的pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.6

然后,我们可以打开main.dart ,添加初始化代码。

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(const MyApp());
}

这就是了!我们已经完成了所有的配置步骤,现在我们应该能够在安卓、iOS和网络上运行我们的应用程序而不出错。

我们可以在每次想把Firebase添加到Flutter应用中时重复上述步骤,而不必担心特定平台的配置文件(我在看着你,GoogleService-info.plistgoogle-services.json !)。🙏

而我们可以专注于添加功能。🚀

如果你想了解如何设置具有多种口味的Flutter和Firebase应用程序,请参阅这篇后续文章。

编码愉快!

参考资料