flutter で flavor を分ける

みなさんこんにちは、 id:takkumattsu です!
前回flutterでFirebase App Distributionを利用してアプリを配布する - covelline blogという記事を書いたのですが、その時の宿題として flavor を分けるというのがあったので今回はそのやり方を書いていきたいと思います!

blog.covelline.com

余談ですが現在開発しているカスタマイズ自由なニュースアプリ fennec は flutter でバリバリ開発しています🦊

是非インストールして使ってみてください!


前置きが長くなってしまいましたがさっそく書いていきます!

初めに

DevelopmentStagingProductionの3つのflavorを追加することを例に書いていきたいと思います。

コードは https://github.com/takkumattsu/add_flavor_flutter に置いてあります。

flavor を分ける

iOSの flavor(schema) 追加

まず Xcode で open ios/Runner.xcworkspace/ を開きます。

open ios/Runner.xcworkspace/

XXX.xconfigを作る

Development.xcconfigStaging.xcconfigProduction.xcconfigとなるように変更します。

中身はひとまず

#include "Generated.xcconfig"


PRODUCT_BUNDLE_IDENTIFIER=
BUNDLE_NAME=

とします。

before after
f:id:takkumattsu:20210427155648p:plain:w400 f:id:takkumattsu:20210427174300p:plain:w400

Configurationsを修正する

DebugとReleaseを用意しておきます。
Developmentは開発時にしか使わないのでDebugだけにしています。

f:id:takkumattsu:20210503123942p:plain

Schemeを修正する

Edit Schemeから

f:id:takkumattsu:20210503142246p:plain

元からあるやつをコピーして(Duplicate Scheme)、RunのBuild ConfigurationをDebug-XXXXXに変更します。

f:id:takkumattsu:20210503142636p:plain

ProfileとArchiveはRelease-XXXXXに変更します。

f:id:takkumattsu:20210503142544p:plain

最終的にこんな感じに

f:id:takkumattsu:20210503141640p:plain

表示名とBundle Identifierを変える

XXX.xcconfigを自分のアプリに合わせたものに変えます。

例)

Production.xcconfig

#include "Generated.xcconfig"

PRODUCT_BUNDLE_IDENTIFIER=com.covelline.xxxapp
BUNDLE_NAME=APP

Development.xcconfig

#include "Generated.xcconfig"

PRODUCT_BUNDLE_IDENTIFIER=com.covelline.xxxapp.dev
BUNDLE_NAME=DEV APP

Staging.xcconfig

#include "Generated.xcconfig"

PRODUCT_BUNDLE_IDENTIFIER=com.covelline.xxxapp.stg
BUNDLE_NAME=STG APP

その後にProduct Bundle Identifier$(PRODUCT_BUNDLE_IDENTIFIER)を入力します。

before after
f:id:takkumattsu:20210503151812p:plain:w400 f:id:takkumattsu:20210503151924p:plain:w400

表示名を変えるにはInfo.plistBundle name$(BUNDLE_NAME)に変更します。

before after
f:id:takkumattsu:20210503154834p:plain:w400 f:id:takkumattsu:20210503154940p:plain:w400

実行してみる

iOSのシミュレーターを起動して以下で実行できます

flutter run --debug --flavor Development

表示名も変わってますね!

f:id:takkumattsu:20210503155900p:plain

Android の floavr 追加

application idの変更

android/app/build.gradle に以下を追加します。

diff --git a/android/app/build.gradle b/android/app/build.gradle
index ca7280b..fa1126e 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -34,7 +34,7 @@ android {

     defaultConfig {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
-        applicationId "com.example.add_flavor_flutter"
+        applicationId "com.covelline.xxxapp"
         minSdkVersion 16
         targetSdkVersion 30
         versionCode flutterVersionCode.toInteger()
@@ -48,6 +48,19 @@ android {
             signingConfig signingConfigs.debug
         }
     }
+
+    flavorDimensions "default"
+
+    productFlavors {
+        production {
+        }
+        development {
+            applicationIdSuffix ".dev"
+        }
+        staging {
+            applicationIdSuffix ".stg"
+        }
+    }
 }

表示名の変更

android/app/src/main/AndroidManifest.xml を以下のように変更します。

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 7976cb9..77db055 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -1,7 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.example.add_flavor_flutter">
    <application
-        android:label="add_flavor_flutter"
+        android:label="@string/app_name"
         android:icon="@mipmap/ic_launcher">
         <activity
             android:name=".MainActivity"

次に以下のルールでstrings.xmlを作成します。

android/app/src/falvor/res/values/string.xml

f:id:takkumattsu:20210503174814p:plain

f:id:takkumattsu:20210503174855p:plain

中身はapp_nameを定義します

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">STG APP</string>
</resources>

実行してみる

Androidのエミューレーターを起動して

flutter run --debug --flavor Development

表示名も変わってますね!

f:id:takkumattsu:20210503175123p:plain

終わりに

一回やり方がわかってしまえば簡単ですね! 良いflutterライフを!