使用FlutterFire和CLI对多个Firebase环境进行Flutter Flavors设置

645 阅读5分钟

在计划发布Flutter应用程序时,设置不同的开发环境很重要。

  • 开发:由开发人员在构建应用程序时使用
  • 暂存:用于向Q/A团队和其他产品利益相关者/客户分发构建的应用程序
  • 生产环境:由所有从App Store下载实时应用的用户使用。

这样设置使每个人的生活更轻松,并确保生产环境中的数据不会在开发过程中被错误地改变。👍


就Flutter而言,我们可以使用flavors来设置不同的环境。

但如果我们的Flutter应用程序使用Firebase后端,事情就会变得有点复杂,正确设置东西曾经需要大量的手动配置步骤。

幸运的是,随着**Very Good CLIFlutterFire CLI**等工具的引入,事情变得容易多了。

而这正是本文的主题:如何在几个简单的步骤中设置一个具有多种口味和环境的Flutter & Firebase应用

什么是Flutter Flavors?

Flavors 让您定义不同的构建配置,并根据需要进行更改。例如,您可能想调用不同的 API 端点,使用不同的 API 密钥,甚至为每个配置提供不同的应用程序图标。

当从命令行构建您的Flutter应用程序时,Flavors很容易使用。

flutter build --flavor development

在Android上,这决定了在Gradle构建过程中使用哪种产品风味

在iOS上,可以进行配置,以便为每种口味使用不同的Xcode方案

而从2021年12月起,整个过程可以(大部分)自动化。让我们来看看如何。

使用Very Good CLI的Flutter和Firebase应用程序的多个版本

Very Good Ventures发布了**Very Good CLI**,这是一个工具,我们可以用它来创建预先配置好的Flutter应用程序,并有许多其他有用的功能

我们所要做的就是安装它。

dart pub global activate very_good_cli

然后我们可以用它来创建一个新的Flutter应用,就像这样。

very_good create --org-name com.codewithandrea my_test_app_flavors

如果我们看一下生成的Flutter应用程序,我们会发现以下文件在lib

lib/
  main_development.dart
  main_production.dart
  main_staging.dart

而且我们可以通过在命令行上传递正确的参数来运行生成的应用程序。

# 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

另外,我们也可以直接从VSCode中选择口味,因为Very Good CLI已经为我们生成了多种启动配置。

VS代码的启动方式

但最重要的是,Xcode和Android项目已经被配置成可以运行多种口味,这意味着我们不必在Xcode方案或gradle文件上捣乱。💯

设置多个Firebase环境

Very Good CLI帮助我们解决了Flutter方面的问题。

但是Firebase方面呢?

嗯,我们可以使用**FlutterFire CLI**工具为我们的项目生成正确的Firebase配置,我在之前的文章中已经解释过了。

但是这一次,我们必须为每个Flutter风味创建一个Firebase项目。为了保持一致性,我们可以这样来命名Firebase项目。

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

然后,我们可以使用FlutterFire CLI为每种Flutter风味生成正确的Dart初始化文件,用这个命令。

# Dev environment (note: do the same for Stg and Prod)
flutterfire config \
  --project=my-test-app-flavors-dev \
  --out=lib/firebase_options_dev.dart \
  --ios-bundle-id=com.codewithandrea.my-test-app-flavors.dev \
  --macos-bundle-id=com.codewithandrea.my-test-app-flavors.dev \
  --android-app-id=com.codewithandrea.my_test_app_flavors.dev

当我们这样做时,我们必须在iOS和macOS上使用正确的捆绑ID。这可以通过打开Xcode中的项目构建设置来找到。

Xcode项目设置的多种口味

而在Android上,正确的applicationId ,可以在android/app/build.gradle 里面找到,同时还有每个口味使用的applicationIdSuffix

android {
    
    ...
    
    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.codewithandrea.my_test_app_flavors"
        minSdkVersion 16
        targetSdkVersion 30
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

    ...

    flavorDimensions "default"
    productFlavors { 
        production {
            dimension "default"
            applicationIdSuffix ""
            manifestPlaceholders = [appName: "My Test App Flavors"]
        }
        staging {
            dimension "default"
            applicationIdSuffix ".stg"
            manifestPlaceholders = [appName: "[STG] My Test App Flavors"]
        }        
        development {
            dimension "default"
            applicationIdSuffix ".dev"
            manifestPlaceholders = [appName: "[DEV] My Test App Flavors"]
        }
    }

    ...
}

每个Flutter版本的Dart初始化

一旦我们为每种Flutter风味运行了flutterfire config ,最后一步就是为每个目标使用正确的Firebase选项。

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

一旦完成这些,我们就可以选择一种口味,并在iOS、Android或Web上运行该应用程序。

VS Code启动风味

很好,不是吗? 😀

关于使用Firebase Analytics & Crashlytics的注意事项

某些Firebase服务仍然需要一些特定平台的配置才能正常工作。

特别是,请看Flutterfire客户端中这个开放问题评论

总结

正如我们所看到的,我们可以使用新的FlutterFire CLI来配置我们的Firebase项目,只需一个命令。

而如果我们想在其中加入口味,非常好的CLI让我们的生活更轻松。

虽然整个过程不能完全自动化(还没有),但同时使用FlutterFireVery Good CLI可以为我们节省大量的时间(和错误)!🚀

编码愉快!

参考资料