在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项目,我们有两个选择。
- 直接从Firebase控制台创建它
- 让
flutterfire为我们做这件事
根据我的经验,最好是选择选项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.plist 和google-services.json !)。🙏
而我们可以专注于添加功能。🚀
如果你想了解如何设置具有多种口味的Flutter和Firebase应用程序,请参阅这篇后续文章。
编码愉快!