🗂

flutter_flavorizrで爆速Flavor対応

2021/10/13に公開

はじめに

僕自身、最近はこの方法でFlavor対応をしておらず、下記リンクの方法を好んで使っています。
https://zenn.dev/riscait/articles/separating-environments-in-flutter
flutter_flavorizrを使う理由が特になければリンク先の方法で行うことをおすすめします。

もしflutter_flavorizrを使う場合は、以下の内容を参考にしていただければと思います。

Flavorについて

Flavor対応を行うとビルド環境を分けることができます。

例えば、以下のような状況下でかなり有効です。

  • Dev環境のFirebaseプロジェクトに接続したReleaseビルドを作成(パフォーマンス検証や社内ビルドチェック時等)
  • Firestoreの構造を変更する場合に、Dev環境のFirebaseプロジェクトに接続してテスト→問題がなければProd環境に変更を加える

しかしFlavor対応はかなり難易度が高く、手順に慣れていないと数日掛かってもおかしくない程です。

そこで今回は、Flavor対応を簡単に行うことができるflutter_flavorizrというパッケージを紹介しようと思います。

※ちなみに手動で行う方法については、下記リンクが詳しいです。

https://medium.com/flutter-jp/flavor-b952f2d05b5d

flutter_flavorizr

flutter_flavorizrというパッケージを使用することで爆速でFlavor対応を行うことができます。

https://pub.dev/packages/flutter_flavorizr

セットアップ

flutter_flavorizrを使用するには、下記のツール/ソフトウェアを事前にインストールしている必要があります。

  • Ruby
  • Gem
  • Xcodeproj (through RubyGems) ←gemでインストールする必要があるので見逃さないこと!

(ちなみにasdf経由でインストールしたRuby3系+Gemで動作確認済みです。)

pubspec.yamldev_dependenciesに以下を追記してflutter pub getコマンドを実行(VSCodeであれば保存すると勝手に裏で取得してくれます)します。

dev_dependencies:
  flutter_flavorizr: ^2.0.0

その後、用意したいFlavor環境を以下のようにpubspec.yamlに書きます。
この例では、Flavor環境として[dev, stg, prod]を用意しています。
applicationId, bundleIdはそれぞれ適切なものに変更して下さい。

flavorizr:
  app:
    android:
      flavorDimensions: "flavor-type"
    ios:

  flavors:
    dev:
      app:
        name: "dev app name"

      android:
        applicationId: "com.example.appname.dev"

      ios:
        bundleId: "com.example.appname.dev"

    stg:
      app:
        name: "stg app name"

      android:
        applicationId: "com.example.appname.stg"
      ios:
        bundleId: "com.example.appname.stg"

    prod:
      app:
        name: "prod app name"

      android:
        applicationId: "com.example.appname.prod"
      ios:
        bundleId: "com.example.appname.prod"

pubspec.yamlへの記述が終わったら、下記コマンドを実行します。

flutter pub run flutter_flavorizr

コマンド実行が完了すると、指定したFlavor環境と、Flavor環境ごとのmain-<flavor>.dart
(上記の例だとmain-dev.dart, main-stg.dart, main-prod.dart)が生成されています。
ビルドモードとFlavor環境をそれぞれ指定してflutter runすることで、様々な環境でビルドを実行することができます。
VSCodeのlaunch.jsonなどで起動設定しておくと楽だと思います(最下部にVSCodeの設定例を掲載しています)。

// ex. ビルドモード: debug, Flavor環境: devで実行
flutter run --debug --flavor dev --dart-define=FLAVOR=dev -t lib/main-dev.dart

また、Flavor環境ごとにFirebaseのプロジェクトを切り分けることもできます。
下記はdev環境のFirebaseプロジェクト設定の例です。
android, iosそれぞれのfirebaseのプロパティに、google-services.jsonGoogleService-Info.plistのパスを指定します。

flavors:
    dev:
      app:
        name: "dev app name"

      android:
        applicationId: "com.example.appname.dev"
        firebase:
          config: ".firebase/dev/google-services.json"

      ios:
        bundleId: "com.example.appname.dev"
        firebase:
          config: ".firebase/GoogleService-Info-dev.plist"

VSCodeのlaunch.json設定例

例として、debug-dev, release-dev, release-prod環境の設定例を追記しました。
必要に応じて変えると良いでしょう。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "debug-dev",
            "request": "launch",
            "type": "dart",
            "program": "lib/main-dev.dart",
            "args": [
                "--debug",
                "--flavor",
                "dev",
                "--dart-define=FLAVOR=dev",
            ],
        },
        {
            "name": "release-dev",
            "request": "launch",
            "type": "dart",
            "program": "lib/main-dev.dart",
            "args": [
                "--release",
                "--flavor",
                "dev",
                "--dart-define=FLAVOR=dev",
            ],
        },
        {
            "name": "release-prod",
            "request": "launch",
            "type": "dart",
            "program": "lib/main-prod.dart",
            "args": [
                "--release",
                "--flavor",
                "prod",
                "--dart-define=FLAVOR=prod",
            ],
        },
    ]
}

flutter pub run flutter_flavorizrを実行した時の挙動をカスタムする

パッケージのデフォルトの設定では、flavor.dartpages/my_home_page.dart等が自動で生成され、少々使いづらい場面も出てくるかも知れないため、コマンド実行の挙動をカスタマイズできるシェルスクリプトを用意しました。
flavorizr.shのような適当な名前を付けて、プロジェクト直下に配置しておきます。

#!/bin/bash

args=""

for i in $(cat flavor.config); do
  if [ ! "`echo $i | grep ';'`" -a ! "`echo $i | grep '~'`" ]; then
    args+=$i,;
  fi
done

flutter pub run flutter_flavorizr -p ${args%,}

またこのシェルスクリプトで読み込む下の設定ファイルを用意する必要があります。
flavor.configという名前を付けて、flavorizr.shと同じくプロジェクト直下に配置します。

assets:download
assets:extract
android:androidManifest
android:buildGradle
android:dummyAssets
flutter:flavors
flutter:app
flutter:pages
flutter:targets
ios:xcconfig
ios:buildTargets
ios:schema
ios:dummyAssets
ios:plist
ios:launchScreen
google:firebase
assets:clean
ide:config

使い方

上記のflavor.configのうち、必要でない設定の頭に「;」もしくは「~」を付けると無効にできます(※間にスペース等を入れると上手く認識しないので注意)。
例: (assets:downloadandroid:androidManifestを無効)

;assets:download
assets:extract
~android:androidManifest
android:buildGradle
...(略)

その上でflavorizr.shを実行すると、Flavor対応されたファイルが自動生成されます。

Discussion