こんにちは。エキサイトでアプリエンジニアをしている岡島です。
今回は、Flutterプロジェクトで環境ごとに設定を分けて開発・ビルドしたい場合に便利なツール、flutter_flavorizr
を用いた環境構築方法を紹介したいと思います。
本記事では、開発(dev)、ステージング(stg)、本番(prod)の3環境を想定し、flutter_flavorizr
を使ってiOSとAndroid両方の設定を自動で生成する方法を解説していきます。
使ってみた感想としては、yamlファイルを書くだけで環境分けができ、IDEの環境設定も自動で行ってくれるのでとても便利だと感じました。
flutter_flavorizrとは?
flutter_flavorizr
は、Flutterプロジェクトにおける マルチフレーバー対応を簡単に行うためのコード生成ツールです。
以下のようなタスクを自動で生成・設定してくれます。
- AndroidとiOS両方のビルド設定(flavor)の自動生成
- 環境ごとのアプリアイコン設定
- Firebaseの設定ファイル(
GoogleService-Info.plist
/google-services.json
)の環境別配置
これにより、開発者はyamlファイルに定義を書くだけで、煩雑な手作業なしに複数環境の構築が可能になります
今回は簡単に環境分けの部分を紹介します。
注意点
flutter_flavorizrの自動生成ファイルによって、既存ファイルが上書きされるケースがあるため、既存のプロジェクトの導入時には注意が必要かもしれません。
実装手順
flutter_flavorizr を追加
pubspec.yaml
に flutter_flavorizr を追加し、 pub getします。
dev_dependencies: flutter_flavorizr: ^2.3.0
flutter pub get
flavorizr.yamlに環境を設定する
ide: "idea" flavors: dev: app: name: "MyApp Dev" android: applicationId: "com.example.myapp.dev" ios: bundleId: "com.example.myapp.dev" stg: app: name: "MyApp Staging" android: applicationId: "com.example.myapp.stg" ios: bundleId: "com.example.myapp.stg" prod: app: name: "MyApp" android: applicationId: "com.example.myapp" ios: bundleId: "com.example.myapp"
各項目の説明
ide: "idea"
これは使用しているIDEを指定する設定です。
"idea" を指定すると、Android Studio (IntelliJベースのIDE) 向けに .idea ディレクトリ配下の設定ファイルが適切に更新されるようになります。
flutter_flavorizr は IDE に応じてフレーバーごとの「Run Configuration」を自動生成してくれます。
他にも "vscode" も指定可能です。
flavors:(各フレーバー定義)
この中で複数のフレーバー(環境)を定義します。上記では dev、stg、prod の3つを定義しています。
app.name
各環境のアプリ名です。
F.title
などとして参照したり、Android/iOSアプリ上の表示名として反映されたりします。
例:開発用には "MyApp Dev"、本番用には "MyApp"。
applicationId , bundleId
applicationIdはAndroid, bundleIdはiOSのアプリ識別子です。 通常、com.example.myapp.dev のように、環境名で末尾を変えることが多いです。
自動生成コマンドの実行
flutter pub run flutter_flavorizr
最後に
flutter_flavorizrを利用すれば、アプリアイコンやFirebaseプロジェクトを環境ごとに用意することも可能です。ほとんど自動で必要な処理が行われるのでお手軽だと思います。IDEのRun Configurationの作成もできるのでとても嬉しいなと思いました。