Flutterで新規モバイルアプリを作成する際の環境構築をまとめていく。個人開発のアプリなので不要なセットアップも含まれるが諸々と試してみようと思う。
こちらのスライドを参考にするが、他に良さそうなものがあれば適宜追加していく。

sukesan 2023/05/03に更新

バージョン管理ツールの導入

以下、対応したこと

.gitignoreに.fvm/flutter_sdkを追加。
コマンドの先頭に毎回fvmとつけるのは大変なので、エイリアスを設定してflutterで実行する際にはfvmとつくようにした。

# zshの場合
echo 'alias flutter="fvm flutter"' >> ~/.zshrc
source ~/.zshrc

configファイルによって、プロジェクトで利用しているflutterのバージョンを共有できるので良さそう。

{
  "flutterSdkVersion": "3.7.12",
  "flavors": {}
}

設定後にflutter doctorを実行したところ、Flutterの項目でwarningが発生。

Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/x.x.x/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/xxx/fvm/versions/x.x.x. Consider adding /Users/xxx/fvm/versions/x.x.x/bin to the front of your path.

調べてみるとDartが既にインストールされている場合に発生する問題だった。

DartをアンインストールしたらWarningが解消された。

brew uninstall --force dart

sukesan 2023/05/09に更新

Formatter / Linter

前提

エディタはVisual Studio Codeを利用している。

Formatter

スライドではEditorConfigプラグインの導入を勧めているが、Flutterのみの開発の場合はDartプラグインにFormatterが搭載されているそうなのでそれを入れて、ファイル保存時にフォーマットするようにすれば良さそう。

Linter

スライドと同じくflutter_lintsを追加し、生成ファイルを対象外としている。
https://pub.dev/packages/flutter_lints
以下、analysis_options.yamlの内容

include: package:flutter_lints/flutter.yaml

analyzer:
  exclude:
    - "**.freezed.dart"
    - "**.g.dart"

linter:
  rules:

sukesan 2023/05/04

Flavor

前提

現状はiOS向けのみ対応予定なため、Android対応については対応後に追記
環境は開発環境と本番環境の2つを作成。個人開発なので検証環境はなしだが、環境追加はそこまで大変ではなさそうなので必要になったら後から追加する

対応方針

FlutterでFlavor対応する場合、方法はいくつかあるが今回はFlutter3.7から使用できるdart-define-from-fileを利用した方法を採用。

具体的な方法は下記の記事を参照。

元々はXCodeでxcconfigファイルを作成する方法で進めていたが、XCode上で設定する内容が多くて少し大変だったので途中で方法を切り替えた。

sukesan 2023/05/04に更新

以下はFlavor対応後に実施

環境ごとにアプリアイコンを作成(iOS)

1024x1024のサイズでFigmaでアイコンを作成

flutter_launcher_iconsを利用して、様々なサイズのアイコン画像を生成。
各環境で実行すると以下のようにアプリアイコンが切り替わる。

参考

sukesan 2023/05/04

Firebaseを環境ごとに分ける(iOS)

基本的には以下の記事通りに進めれば対応できる。

注意点としてビルド時に指定した環境のGoogleService-Info.plistをコピーするが、追加したスクリプトの後続処理の中でGoogleService-Info.plistが含まれていないと上手く動かない。

以下、参考記事からの引用だが、これを追加した後にCopy Bundle Resourcesの中身も確認すること。

Xcode上でRunnerディレクトリへ GoogleService-Info.plist ファイル（どの環境のものでも良い）をドラッグ＆ドロップで追加してファイルと参照を追加しましょう。

sukesan 2023/05/10に更新

Commit時に実行

Linterの設定をしたので、Commit時に動かすようにしてみる。調べてみるとlefthookが良さそうだったので使ってみる。

macOSだとHomebrewでインストールできる。

$ brew install lefthook

プロジェクトのルートにlefthook.ymlを追加して設定を加える。

pre-commit:
  commands:
    1_analyzer:
      run: flutter analyze
    2_linter:
      run: dart fix --apply

設定について

commandを複数定義した場合に実行順が辞書順だったので、prefixをつけて実行順を制御している。
先にflutter analyzeで問題を検知して、その後dart fix --applyで修正できるところは自動修正する構成とした。実行順を入れ替えて、自動修正後にgit addすることもできるが、自動修正の内容を確認した上でaddしてCommitしたいため、このようにしている。
formatを設定することもできるが、Visual Studio Codeにプラグインを入れていて、かつ開発者が1人でやっているのでlefthookの設定としては入れていない。ただ、複数人での開発時は入れたほうが良さそう。
testを実行することもできるが、まだテストを書けていないので必要になった時に追記する。

実際にCommitしなくても以下のコマンドを実行しても動作確認できる。
lefthook run pre-commit

参考

https://dart.dev/tools/dart-fix