flutter中多flavors方案以及添加firebase

有想做海外市场的同学们，可能需要用到firebase。今天我们讲讲怎么使用「FlutterFire CLI」添加 firebase以及如何设置「flavors」

在Flutter 2.8版本以前添加firebase，需要加许多原生平台的配置，现在2.8版本我们直接在dart中配置即可。

代码语言：javascript复制

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart'; // 通过 `flutterfire` CLI产生

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

firebase_options.dart可以通过flutterfire CLI（https://pub.dev/packages/flutterfire_cli）实现，它可以为我们的项目生成正确的 Firebase 配置，下面我们来看看如何具体的操作。

1. 安装 Firebase 和 FlutterFire CLI

首先，我们通过命令行安装下flutterFire cli：

代码语言：javascript复制

dart pub global activate flutterfire_cli

接下来，我们还需安装一个firebase cli工具：

代码语言：javascript复制

npm install -g firebase-tools

❝Firebase CLI 提供了多种工具来从命令行测试、管理和部署您的 Firebase 项目。有关详细信息，请参阅官方文档（https://firebase.google.com/docs/cli/）和GitHub （https://github.com/firebase/firebase-tools）。 ❞

2.创建一个flutter应用

通过命令行或者IDE创建一个flutter应用：

代码语言：javascript复制

flutter create my_test_app

3.创建一个新的firebase项目

我们可以通过以下两种方式来创建firebase项目：

直接从Firebase 控制台（https://console.firebase.google.com/u/0/）创建它
通过flutterfire创建

根据我的经验，最好使用第一种方法，因为flutterfire在创建项目时有时会出现如下错误：

代码语言：javascript复制

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

所以我们通过Firebase 控制台（https://console.firebase.google.com/u/0/）创建。

第一步先输入项目名称

在第 2 步，我们可以禁用 Google Analytics：

这样我们就完成了firebase的创建，接下来我们要和我们的项目关联。

4.使用FlutterFire CLI添加firebase项目

创建完firebase项目后，我们在命令行运行如下：

代码语言：javascript复制

flutterfire configure

⚠️：我们先需要通过firebase login 登录

运行完上面命令后，将列出我们所有创建的项目

代码语言：javascript复制

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>

选择我们刚刚创建的项目，然后按回车。

接下来，会让我们选择支持的平台

代码语言：javascript复制

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

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

代码语言：javascript复制

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看到，已经为我们创建了应用：

5. 在 Flutter 中初始化 Firebase

做完以上步骤后，在我们的flutter项目lib文件夹下会出现一个firebase_options.dart的文件。

我们还需要在pubspec.yaml添加一个firebase_core的库：

代码语言：javascript复制

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.6

然后打开main.dart 添加初始化的代码：

代码语言：javascript复制

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());
}

到这里，我们就完成了所以的配置，不需要在去手动添加GoogleService-info.plist还有google-services.json 。

6.为Flutter & Firebase Apps 添加Flavors

对于一般的应用程序，上面的不走已经足够了，但是如果你的app有多种Flavors，需要使用不同的firebase项目进行开发。比如为「development」, 「staging」, 和 「production」 设置不同的firebase项目。

手动设置的不同的Flavors是非常容易出错的，这里我们会借助[very_good_cli](https://github.com/VeryGoodOpenSource/very_good_cli)（https://github.com/VeryGoodOpenSource/very_good_cli）命令行工具来实现。

首先，我们来安装它：

代码语言：javascript复制

dart pub global activate very_good_cli

然后使用它创建一个新的flutter app：

very_good create --org-name com.codewithme my_test_app_flavors

看看我们刚刚生成的项目，我们会发现如下：

代码语言：javascript复制

lib/
  main_development.dart
  main_production.dart
  main_staging.dart

我们也可以通过不同的参数，来启动对应的APP

代码语言：javascript复制

# Run development
flutter run --flavor development --target lib/main_development.dart
# Run staging
flutter run --flavor staging --target lib/main_staging.dart
# Run production
flutter run --flavor production --target lib/main_production.dart

或者在IDE中配置启动

[very_good_cli](https://github.com/VeryGoodOpenSource/very_good_cli) 已经为我们把android和ios的配置都完成了，帮了我们一个大忙！！！

设置多个Firebase 环境

very-good_cli帮我们设置好了flutter的环境，那如何处理多个firebase呢？

现在我们得先创建3个firebase项目

my-test-app-flavors-dev
my-test-app-flavors-stg
my-test-app-flavors-prod

接下来我们需要使用FlutterFire Cli为没个flavors生成一个配置文件：

代码语言：javascript复制

# Dev environment
flutterfire config 
  --project=my-test-app-flavors-dev 
  --out=lib/firebase_options_dev.dart 
  --ios-bundle-id=com.codewithme.my-test-app-flavors.dev 
  --macos-bundle-id=com.codewithme.my-test-app-flavors.dev 
  --android-app-id=com.codewithme.my_test_app_flavors.dev

注意：bundle-id和android-app-id一定要对应哦！

接下来在对应flavors的main函数初始化就可以了

代码语言：javascript复制

// main_development.dart
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:my_test_app_flavors/app/view/app.dart';
import 'package:my_test_app_flavors/firebase_options_dev.dart';

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

到此，多个flavors就配置完成了

是不是真香！

少年别走，交个朋友～

https 网络安全 flutter ios android

0 人点赞

flutter中多flavors方案以及添加firebase​