概要

モバイルアプリを開発する際には、単にコードを書くことだけでなく、他にも重要な作業がございます。

そのひとつが、「開発環境（Development）」や「本番環境（Production）」といった異なるビルド環境をあらかじめ用意しておくことです。

この作業は、アプリの開発からリリースに至るまでの工程を効率的に進めるために、欠かすことのできない重要なプロセスとなります。

なぜFlavorsが必要なのか

アプリは開発の各段階において、以下のような設定を環境ごとに切り分ける必要があります：

• アプリ名
• アプリアイコン
• APIキー
• アプリID など

Flutterの公式ドキュメントにも記載されているように、「Flavors」を利用することで、こうした構成を環境別に整理し、明確にビルドを分離することが可能となります。

内容

Flutterの標準設定では、Flavors（ビルド環境の分岐）機能が自動的にサポートされているわけではありません。

しかし現在では、Flavorsの設定を支援する便利なパッケージも提供されており、導入のハードルは以前より下がっています。

一方で、Flutter公式ドキュメントに沿って手動で設定を行う方法もあり、こちらはライブラリに依存せずに済むというメリットがあります。構成も比較的シンプルで、プロジェクトへの適用も柔軟です。

Flavorsを導入することで、ひとつのコードベースから環境ごとに異なるアプリをビルドすることが可能になります。例えば、以下のような違いを持たせることができます：

• 環境別に異なるアプリ名やUIを設定
• 使用するAPIエンドポイントの切り替え
• Firebaseなどの外部サービス設定を環境ごとに分離
• アプリIDを開発・本番で個別に管理

環境ごとの設定手順について

FlutterでBuild Flavorsを導入するには、AndroidとiOSそれぞれに対して個別に設定作業を行う必要があります。

本記事では、以下の2つの環境を例に取り、実際の設定手順を詳しくご紹介いたします：

• 開発用環境：dev（Development）
• 本番用環境：prod（Production）

1. Androidの設定

1.1 環境の追加

まず、Flutterプロジェクトのディレクトリ内にある以下のファイルを開きます

android/app/build.gradle.kts

続いて、android {} ブロックの内部に、以下の2つの設定を追記します：

• flavorDimensions：ビルドのバリエーション軸を定義
• productFlavors：環境ごとの設定内容を記述

android {
    namespace = "com.example.flavor"
    compileSdk = flutter.compileSdkVersion
    ndkVersion = flutter.ndkVersion

    compileOptions { ... }

    kotlinOptions { ... }

    defaultConfig { ... }

    buildTypes { ... }

    //
    flavorDimensions += "default"
    productFlavors {
        create( name: "dev") {
            dimension = "default"
            applicationIdSuffix = ".dev"
        }
        create( name: "prod") {
            dimension = "default"
            applicationIdSuffix = ".prod"
        }
    }
}

1.2 動作確認

• 設定が正しくできたか確認するために、以下のコマンドを実行します：

flutter run --flavor dev
flutter run --flavor prod

1.3 カスタマイズ1.3.1 アプリ名の変更

・build.gradle.kts ファイルを更新し、flavorDimensions ブロック内に resValue() を追加します。以下のように app_name をフレーバーごとに設定します：

//
flavorDimensions += "default"
productFlavors {
    create( name: "dev") {
        dimension = "default"
        resValue(
            type = "string",
            name = "app_name",
            value = "[DEV] Flavor")
        applicationIdSuffix = ".dev"
    }
    create( name: "prod") {
        dimension = "default"
        resValue(
            type = "string",
            name = "app_name",
            value = "Flavor")
        applicationIdSuffix = ".prod"
    }
}

・android/app/src/main 内の AndroidManifest.xml ファイルを更新します。android:label の値を @string/app_name に置き換えます。

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:label="@string/app_name"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity

アプリを再実行し、アプリ名が設定どおりに更新されているかを確認します。

1.3.2 アプリアイコンの変更

• アイコンの準備：
  
  dev 環境と prod 環境それぞれに対して、以下のサイズの PNG 形式のアイコンを準備してください。
  
• • mipmap-mdpi（48×48 ピクセル）
  • mipmap-hdpi（72×72 ピクセル）
  • mipmap-xhdpi（96×96 ピクセル）
  • mipmap-xxhdpi（144×144 ピクセル）
  • mipmap-xxxhdpi（192×192 ピクセル）
    
• 必要なサイズのアイコンは、App Icon Generator などのツールを使うと簡単に作成できます。
• android/app/src ディレクトリ内に、環境ごとに dev/src および prod/src というフォルダを新たに作成します。
• 作成した各ディレクトリに、それぞれの環境用アイコンを含む mipmap-〜 フォルダを追加します。
• 各アイコンのファイル名は ic_launcher.png としてください。
• アイコン配置後のディレクトリ構成は、以下のようになります：
  

設定結果は以下のようになります。

2. iOSの設定

2.1 アプリに2つのビルド環境を追加する

Flutterプロジェクト内の iOSアプリをXcodeで開く

メニューから Product > Scheme > New Scheme を選択する

「Target」には Runner を選択する

「Name」には dev と入力する

「OK」をクリックして環境を作成する

同様の手順で、prod 環境でも作成する

2.2 各環境用のビルド構成を追加する

• Project Navigator タブで Runner を選択します。
  
  
• メインウィンドウの 「PROJECT」セクションの下 にある Runner をクリックする
• 「Info」タブ を開き、「Configurations」で + ボタンをクリックする。
  すると、 Debug と Release の構成をそれぞれ複製して、以下のように環境別に設定が追加される。
  
  

2.3 各環境に構成を割り当て

Product > Scheme > Manage Schemes にて、devを選択して、以下の情報で編集してください。

• Run: Debug-dev
• Test: Debug
• Profile: Release
• Analyze: Debug
• Archive: Release-dev

Product 環境も同様に設定してください。

2.4 カスタマイズ2.4.1 アプリ名の設定

• Xcode で User-Defined Setting を作成します。
  Xcode のメインウィンドウで、「TARGETS」内の Runner を選択します。
  上部の 「Build Settings」タブ をクリックします。
  左側の「Basic」タブの下にある + ボタンをクリックし、「Add User-Defined Setting」 を選択します。

設定名として APP_DISPLAY_NAME を追加します。
以下のように各構成（Configuration）に応じた値を設定します：

設定完了後、以下のような結果になります：

• Info.plist ファイルを更新します。
• Project Navigatorで、Runner > Runner > Info.plist を選択します。
• キー CFBundleDisplayName を探し、値を $(APP_DISPLAY_NAME) に変更します。

<key>CFBundleDisplayName</key>
<string>$(APP_DISPLAY_NAME)</string>

• アプリを再ビルドし、各ビルド構成でアプリ名が正しく反映されているかを確認します。
  

2.4.2 アプリアイコンの変更

• Androidと同様に、App Icon Generator を使用してアイコンを準備します。

1. Project Navigatorで Runner > Runner > Assets.xcassets を選択します。
   
2. Assets.xcassets 内で右クリックし、New iOS App Icon を選択して、AppIcon-dev という名前で作成します。
   
3. 準備しておいたアイコン画像を、サイズごとの指定枠にドラッグ＆ドロップして設定します。
   
4. 同様の手順で、AppIcon-prod も作成します。
   

• 設定後、以下のようにアイコンが構成されます：

• ビルド構成ごとにアイコンを紐付ける

1. Project Navigatorで Runner を選択し、メイン画面の下にある 「TARGETS > Runner」 をクリックします。
2. 上部の 「General」 タブを開きます。
3. 「App Icons」 項目の右側にある + をクリックし、以下のように構成ごとのアイコンを設定します：

• 設定後、ビルド構成ごとに適切なアイコンが表示されるようになります。

• アプリを再ビルドして、設定が正しく反映されているかを確認します。

2.5 Podfileの更新

• 最後に、これまでの変更内容に合わせて Podfile を更新します。

結論

アプリ開発の各段階において、環境ごとに構成を分けることは非常に重要です。

Flutterで初期段階からFlavorsを適切に設定することで、

• プロジェクトのテスト性
• 保守性
• リリース管理

が格段に向上します。

複数環境を扱うあらゆるFlutterプロジェクトで、この手法をぜひ取り入れてください。

弊社はflutterのアプリ開発を得意としております。
flutterのアプリ開発のご相談やアプリ開発のプロジェクトマネージャーの採用を弊社では募集しておりますので、遠慮なくご相談ください！

参考資料

[1] https://docs.flutter.dev/deployment/flavors

[2] https://docs.flutter.dev/deployment/flavors-ios