flutter_flavorizrで開発環境と本番環境に分ける

Flutterアプリ開発で開発環境と本番環境を分ける必要が出てきたため、flutter_flavorizrを導入しました。

環境・バージョン

VS Code使用
flutter_flavorizr 2.1.3

記事を書いている時点での最新バージョンを導入しました。

参考

公式サイトを参考にしました。

手順

まずはパッケージをpubspec.yamlに追加します。

pubspec.yaml

dev_dependencies:
  flutter_flavorizr: ^2.1.3

さらにプロジェクトに導入したい環境を追記します。今回はdev（開発環境）とprod（本番環境）を作成します。

pubspec.yaml

flavorizr:
  app:
    android:
      flavorDimensions: "flavor-type"
    ios:
  flavors:
    dev:
      app:
        name: "app name(dev)"
      android:
        applicationId: "com.example.appname.dev"
      ios:
        bundleId: "com.example.appname.dev"
    prod:
      app:
        name: "app name"
      android:
        applicationId: "com.example.appname"
      ios:
        bundleId: "com.example.appname"

※appnameにはアプリ名が入ります
※exampleには組織名が入ります

もろもろの設定が書けたら、下記コマンドを実行します。

flutter pub run flutter_flavorizr

色々なファイルが自動作成・変更されます。

android/app/build.gradle
android/app/src/main/AndroidManifest.xml
ios/Runner.xcodeproj/project.pbxproj
ios/Runner/Info.plist
android/app/src/dev/
android/app/src/prod/
ios/Flutter/devDebug.xcconfig
ios/Flutter/devProfile.xcconfig
ios/Flutter/devRelease.xcconfig
ios/Flutter/prodDebug.xcconfig
ios/Flutter/prodProfile.xcconfig
ios/Flutter/prodRelease.xcconfig
ios/Runner.xcodeproj/xcshareddata/xcschemes/dev.xcscheme
ios/Runner.xcodeproj/xcshareddata/xcschemes/prod.xcscheme
ios/Runner/Assets.xcassets/devAppIcon.appiconset/
ios/Runner/Assets.xcassets/devLaunchImage.imageset/
ios/Runner/Assets.xcassets/prodAppIcon.appiconset/
ios/Runner/Assets.xcassets/prodLaunchImage.imageset/
ios/Runner/devLaunchScreen.storyboard
ios/Runner/prodLaunchScreen.storyboard
lib/app.dart
lib/flavors.dart
lib/main_dev.dart
lib/main_prod.dart
lib/pages/

色々なファイルが変更されたり、main_dev.dartやmain_prod.dartなどが自動生成されて、取り回ししづらくなるのが嫌な人はdart-defineを使って環境を分ける方法もあります。

アプリを実行するときは、下記コマンドを実行します。
には、先程作成した環境（devやprodなど）が入ります。

flutter run --flavor <flavorName> -t lib/main_<flavorName>.dart

下記、prodで実行した結果です。
きちんと環境が分けられているのが分かります。

ただこのままだと、いちいちアプリを実行するのにコマンドを打たなければいけません。環境を分ける前のようにF5キーを入力してアプリを実行するには、launch.jsonを作成し設定をする必要があります。

launch.jsonを.vscodeフォルダ内に作成します。.vscodeフォルダがない場合はプロジェクトのルートに作成してください。

touch .vscode/launch.json

下記、設定の内容です。

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter Debug-Development",
            "request": "launch",
            "type": "dart",
            "program": "lib/main_dev.dart",
            "args": [
                "--debug",
                "--flavor",
                "dev",
            ]
        }
    ]
}

これでF5キーを押すだけで開発環境でビルドできるようになりました。本番環境でビルドしたい場合はlaunch.jsonに本番用ビルドの設定を書き加えて必要に応じて切り替えてください。