【Flutter】悩ましいフォルダ構成について語り合おう

Dart

2021.06.28

概要

どうも、@daiki1003です！

いきなりですが、Flutterプロジェクトのフォルダ構成はどんな風にしていますか？

この記事を読んでいただいていると言うことは多少なりとも
そこに課題意識があるのかもしれません。
僕も以前から悩んでいるうちの一人です。

#Flutter のフォルダ構成に関して lib フォルダ以下みんながどうしてるのかめちゃくちゃ気になる。
出来ればこのTweetがそんな知見が集まるスレになってくることを祈って…
— ashdik(朝日)@Flutter, Wine, BoardGame, Investment (@daiki1003) November 9, 2020

そして、残念ながらまだ最善のフォルダ構成は見つかっていません。
とはいえ、一つの方針を決めて半年くらいやって来ました。

この記事では、
・どんな構成案があったのか？
・その中で、僕が選んだ構成は？
・その構成のメリット・デメリットは？
辺りについて書いています。

🧐どんな構成案があるのか？

🏯アプリのレイヤーに基づいた構成

MVC

lib
- controllers
- models
- views

MVVM

lib
- models
- views
- view_models

Clean Architecture

lib
- controllers
- domain
- - entities
- - repositories
- -  use_cases
- presentation

辺りでしょうか。
(多少の語彙などの違いはあると思います)

すごく無難な印象ですね。
マリオシリーズでいうところのマリオ。
ストリートファイターシリーズでいうところのリュウ。

Udemyなどで紹介されるデモアプリでもこの構成が使われています。

🗻Atomic Designに基づいた構成

自分はReduxとAtomic designをよく使うので
lib以下は
business
actions
reducer
middleware
models
services
core
custom
ui
atoms
molecules
organisms
pages
templates
themes
がメインのディレクトリかもしれないですね🤔
— たーちゃん＠Flutter (@Flutter70862657) November 11, 2020

これは主にUI部分だけの話にはなってしまいますが。

Atomic Designとは、
小さいコンポーネントを組み合わせて大きいコンポーネントにしていく設計手法のこと
です。

…この説明を聞いてピンと来たあなたは相当鋭いと思います。

実はこの思想、ウィジェットを組み合わせてUIを構成する
Flutterとすごく似ているんですよね。

なので、Flutterプロジェクトととても相性が良かったりします。
次に作る小規模なプロジェクトで試してみたいなーなんて思っています。

🔍ドメイン(関心事)に基づいた構成

私の指針としては、
* 小規模アプリは ui/ および model/ フォルダを作る。これによりPDSだけは守る。あとの構成はご自由に
* 中規模以上で通常複数人が関わるアプリは、<機能名>/ という機能ごとの名前空間用フォルダを作り、その中に小規模アプリ用構成を適用
* 共通部品はlib/以下の浅い階層に配置
— ntaoo (@ntaoo) November 9, 2020

lib
- notification
--- component
--- model
--- ui
- setting
- user

機能や関心事ごとにフォルダを切るやり方です。

その他Twitterで寄せていただいた例

lib/ 以下は、
pages/{各画面}/ :各画面の実装
design_system/ : アプリ内で使うfont,space,theme定義を配置
design_system/widgets/ : 共通で使うwidget群
data/ : modelやrepository,dioなどなど適切に配置
utils/ : util,ext系
l10n/: ローカライズ
gen/: 自動生成関連
みたいな感じです🍀
— su-🐈 Flutter, iOS, Firebase (@_sgr_ksmt) November 9, 2020

common
helper
master
：
model
repository
：
presentation
pages
widget
：
今のアプリだとざっくりこんな感じでした(・∀・)
— 西まりも＠アプリ開発/Flutter&Firebase (@marimo_engineer) November 9, 2020

よく作るのは
model/
repository/
repository/entity/
services/
ui/<画面名>/
みたいな感じにしてますね。BLoCで作ってるアプリはbloc/があったりします。
あとはtheme.dartみたいなのはlib/直下に置いたりです。参考になればとー。
— れの / RenoInn (@renoinn) November 9, 2020