Flutter多环境打包方案之一:flutter_flavorizr

APP开发中重要的一环:多环境配置及打包。经过一番调研后,决定使用flutter_flavorizr来实现。

flutter_flavorizr(目前使用的为2.1.2版本):flutter_flavorizr | Flutter Package (flutter-io.cn)

后续:Flutter多环境打包中的三方相关配置(例如腾讯移动推送TPNS、腾讯实时音视频通话TRTC) - 掘金 (juejin.cn)

接入指南:

1. 在pubspec.yaml的dev_dependencies中添加flutter_flavorizr:

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^1.0.0
  # 多环境打包
  flutter_flavorizr: ^2.1.2

2. 在pubspec.yaml中增加多个flavor配置:

# 多环境配置
flavorizr:
  # 这里不需要改动-start
  app:
    android:
      flavorDimensions: "flavor-type"
    ios:
  # 这里不需要改动-end

  flavors:
    # 在这个地方增加环境-start
    # 正式环境
    env_release: # 环境名称,不要使用release、dev、uat等等,会报错
      app: # app的相关设置
        name: "我要变强"  # app名字,可根据环境不同增加后缀做区分
      android: # android相关设置
        applicationId: "com.xxx.xxx" # Android包名
      ios: # ios相关设置
        bundleId: "com.xxx.xxx" # ios的bundleId
    #开发环境
    env_dev:
      app:
        name: "我要变强-DEV"
      android:
        applicationId: "com.xxx.xxx.dev"
      ios:
        bundleId: "com.xxx.xxx.dev"
     # 在这个地方增加环境-end

3. 运行下面命令自动生成相关配置:

flutter pub run flutter_flavorizr

命令执行完成后会出现一下内容:

image.png

由于该命令需要请求github.com, 所以网络不好的话也可能会出现github timeout相关的报错,只需要在网络情况好的情况下多试几次就好。

然后你会发现自己项目里多了许多文件,目前只需要做Android端的(IOS的应该差距不大),所以暂时只截取Android的相关图片,如下:

image.png

image.png

4.根据自己的需要修改自动生成的相关配置

  • 修改App入口 在使用了flutter_flavorizr后,app的入口不再是main.dart,而是下面几个main-env_dev.dart、main-env_release.dart等等相关dart文件,他们分别对应不用的环境。

image.png

现在拿main-env_dev.dart做例子来说明一下修改内容:

// 这里是main-env_dev.dart文件的所有内容
import 'package:flutter/material.dart';
import 'app.dart';
import 'flavors.dart';

void main() {
  F.appFlavor = Flavor.ENV_DEV;
  runApp(App());
}

由于我的App是已经有的项目,runApp(App());中的App()缓存我自己App已有的入口MyApp(),并导入相关包即可,其他环境的入口同样的配置。

完成此步后即可把自动生成的app.dart、pages/my_home_page.dart文件删除。

  • Android修改应用图标(IOS同样步骤,只不过修改的文件不同而已) 同样拿env_dev来举例,只需要修改下图中ic_launcher.png为自己的app图标即可,记得把所有的mipmap文件夹里的都修改

image.png

image.png

  • 增加环境配置数据 多环境增加不同的环境变量配置是在flavors.dart文件中进行增加,

image.png

比如我们增加一个baseUrl的配置:

image.png

增加了baseUrl配置后,就需要在其他界面中使用,使用方法如下: Text(F.title),在需要的地方自己引入调用F.baseURL即可。

image.png

5. 使用命令运行App或者打包成Apk文件

当需要在其他环境打包时,只需要替换命令中的env_dev为相应环境的名称即可,环境名称是在pubspec.yaml中定义的,如:env_release,env_dev等等。

debug运行(env_dev环境):flutter run --flavor env_dev -t lib/main-env_dev.dart

release运行(env_dev环境):flutter run --release --flavor env_dev -t lib/main-env_dev.dart

Android打包(env_dev环境):flutter build apk --flavor env_dev -t lib/main-env_dev.dart

ios打包(env_dev环境):flutter build ipa --flavor env_dev -t lib/main-env_dev.dart