Flutterで環境ごとにビルドする方法 - ローソンデジタルイノベーション　テックブログ

はじめに
ビルド環境を切り替えて開発する方法について
- --dart-define-from-file
- 在宅勤務報告システムで工夫したこと
最後に

はじめに

こんにちは、ローソンデジタルイノベーション(LDI)でiOSエンジニアを担当している山形です。
今回は社内向けにFlutterで開発した在宅勤務報告システムにおいて、複数のビルド環境を切り替えて開発する方法について紹介します。

在宅勤務報告システム関連の記事は以下でいくつか公開しています。 techblog.ldi.co.jp

ビルド環境を切り替えて開発する方法について

今回は社内向けのシステムを開発する際、以下表のようにいくつかの環境を用意することにしました。

環境	内容
ローカル	ローカル環境で開発する際に使用するための環境
開発	開発者が手軽にデプロイし動作確認やテストを行うための環境
ステージング	本番環境と近い状態、リリース前のテストなどに使用する環境
本番	文字通りリリース後社内のユーザに実際に使用もらうための環境

--dart-define-from-file

これらの複数環境を実現するために実行時に--dart-define-from-fileというパラメータを渡すことによって実現します。
このパラメータにそれぞれの環境で使用する環境変数を定義したjsonファイルを渡すことでビルド環境の切り替えが可能です。

環境変数定義(json)

以下のように環境名、URL、APIキーなどを指定しアプリ側で使用する変数を定義します。

▼lib/configs/dev.json

{
  "flavor": "debug",
  "baseURL": "https://example.com/",
  "apiKey": "xxxxx"
}

実行方法

実行時に--dart-define-from-file=lib/configs/dev.jsonを指定することにより環境変数定義を読み込ませることができます。

$ flutter run -d chrome --dart-define-from-file=lib/configs/dev.json

または使用しているIDEによるかと思いますが、IntelliJの場合は実行時に以下の設定を行うことで適用可能です。

[実行構成の編集]-[Additional run args]に--dart-define-from-file=./lib/configs/dev.jsonを追加

ソースコード側の対応例

以下のようにすることでソースコード側で環境変数を読み込むことが可能です。
実装時にこれらの変数を参照することで環境毎にURLを切り分けたり、処理を分岐させることで動作を変えることが可能です。

const flavor = String.fromEnvironment('flavor');
const baseURL = String.fromEnvironment('baseURL');
const apiKey = String.fromEnvironment('apiKey');

在宅勤務報告システムで工夫したこと

在宅勤務報告システムではFirebase Authentication、Microsoft Graphを組み合わせてユーザ認証する機能を実施していますが、ここまで紹介した手法を駆使してダミーデータを使ったログインをできるようにしました。
以下はローカル環境の場合は自動で認証しユーザ情報を返却するための実装です。

  /// 認証処理の実装
  Future< LDITechBlogUserInfo > login() async {
    if (flavor == 'local') {
      // 認証処理を実行せず、すぐにダミーデータを返却
      return LDITechBlogUserInfo(
          userId: "dummy",
          displayName: "ブログ 太郎",
          firstName: "太郎",
          lastName: "ブログ");
    } else {
      // こちらではダミーを使用しない実際の認証処理を実装していました。当記事では割愛します。
    }
  }