🚀

個人開発しているFlutterアプリのアーキテクチャの変更点

2022/04/19に公開

以前noteに投稿したFlutterアプリのアーキテクチャについて、現在少し変わったところをメモします。以前の記事は下記です。
https://note.com/hikarusato/n/n59ad456faaf1

基本的には、Flutterを実務で開発している方( https://zenn.dev/kosawa )の知見がもとになっています。

変更内容

https://github.com/HikaruSato/flutter-architecture-example/pull/1

fvmでFlutterのバージョン管理

fvmを使ってFlutterのバージョン管理するようになりました。
https://github.com/HikaruSato/flutter-architecture-example/commit/eab2f85d7854564218b8c824e4b262e87a26e543

fvm

https://fvm.app/

ViewModel -> Controller

画面に関する処理ロジック(画面表示のためのState保持、画面からRepositoryへの処理受け渡しなど)を担当するレイヤーを Controller とすることにしました。

https://github.com/HikaruSato/flutter-architecture-example/commit/b0b6179ad6a6bc545a8e6b10597c83f4bd9356fc

実際にFlutterではこういうふうにしていることも多そうに感じます。flutter sdkにも TextEditingController とか ScrollController が存在していますし。

プロジェクトのディレクトリ構成の変更

変更前

もともと wasabeefさんの flutter-architecture-blueprints を参考にした下記のような構成でした。

  • ui
    • xxx(機能名): widgetを置く
  • view_models
  • extensions
  • models
    • state
  • repositories

変更後

下記のように変更しました。ある機能に関するコードを凝集するような構成にした感じです。

  • core
    • xxx(機能名)
      • controllers
      • views: widgetを置く
      • models
      • repositories
  • shared(アプリ内で共通で利用するものを置く)
    • extensions
    • models
    • views
    • repositories

https://github.com/HikaruSato/flutter-architecture-example/commit/ba1954601413ec2506fd6c63a3f0b0bb4f3e0534

画面のStateの定義場所を変更

もともとは、models/state に各Stateクラスをファイルを分けて定義していたの Controllerクラス内で定義するように変更しています。
これは結構ファイル分けて書いた方がいいという意見もありそうですが、画面のStateは対応するControllerとHookWidgetでしか利用しないし、ということでそういうことにしています。

https://github.com/HikaruSato/flutter-architecture-example/commit/95a49a2f8290d46ad22ce85a739fca217f3d0198

Discussion