FlutteはUIについてもコードで記述しますので、UI部分のコードが長くなったりネストが深くなりがちです。

肥大化してから分割するのはなかなか大変な作業になりますので、アプリを作成する前に分割についても事前にルールを作っておくのが良いでしょう。
適切に分割されてるコードは共通化もしやすくなります。

・・・

今回は特にリスト形式での表示を例にして分割方法を考えてみます。
ちなみに、リスト形式での表示形式については下記のページが詳しいです。非常に良記事なので、ぜひ一読をおすすめします。

例えば下記のような画面があるとします（いや、現実にあったりします）。
大雑把にWidgetをグループ化するとこんな感じでしょうか？

Flutterのコードと照らし合わせると、こんなイメージになるでしょう。

ここで実際のディレクトリ構造やファイル分割を画面パーツと同じようにしてしまうと、以下のように分けることができます。

各ディレクトリやファイルを見ていきましょう。

lib/main.dart
アプリの起動時に処理される部分で、 MaterialApp が処理されます。

lib/model/
その名の通り MVC の M を実装していきます。

lib/view/
MVCのM(model)のに対してV(View)を実装していきます。

lib/view/widget/
各画面で共通化してつかうwidgetを実装していきます。

lib/view/home/
実際に表示される画面の各パーツを実装していきます。画面が増えていくとこのディレクトリも増えていきます。

lib/view/home/main.dart
画面全体について実装します。内容的には Scaffold と AppBar を実装することが多いでしょう。

lib/view/home/body.dart
Scaffold:bodyにぶら下がるWidgetを実装します。内容がリスト表示のみの画面であればContainerだけの実装になる場合もあります。

lib/view/home/list.dart
list表示させるWidgetを実装します。 listview.builderやFuterBuilder, StreamBuilderを実装することが多いでしょう。

lib/view/home/item.dart
実際にlistで表示される項目を実装します。ListTileやCard等のWidgetで実装するのが楽ですが、Containerを使って独自の表現をすることもできます。

このくらいの単位で分けておくと、item.dart を共用したり body.dartやlist.dartを共用することが楽にできると思います（実際にはこんなに簡単じゃないのは承知しています）。

あとは必要に応じてパーツを切り出して行くわけですが、経験的なところから言うと100行くらいを目安に分割するのが良い感じです。
「大きくなってきたな？」と思えてきたら、「StatefulWidget内にあるStatelessWidgetを切り出していく」、「finalな変数を一つのStatefulWidgetへあまり持たせない」ということを意識すると良いかと思います。

また、view以下のクラス名についてはルール化しておくと、悩むことなく実装できて楽ちんです。
例えば、/lib/view/home/item.dartであれば HomeItemView とする等。

・・・

今回はディレクトリ構造とファイルの分割方法について考えてみました。ここらへんについてはプロジェクトでのルールなどもあると思いますので、参考程度にどうぞ。

ということで、次回こそはコードの解説に入りたいと思います。

・・・

でも、分割すると変数の受け渡しとかが結構面倒になるっていうデメリットもあったりするわけです。
そこでBlocやScopedModelの出番になるわけですが、そちらはそちらでなかなか難しいわけで...

・・・

Twitterにも時々顔をだしていて、稀にFlutterネタなどをつぶやいてます。