FlutterのUI分割は、個別のWidgetクラスでするといいらしい

Flutterではbuild()のネストが深くなり、見づらくなる。
Widgetをどうやって分割するのがいいのか調べていたときの備忘録。

@_monoさんのツイートにあるとおり、
Widgetクラスを使うのが良さそう。

Widget分割をWidgetクラス・メソッドのどちらでするかの回答、公式動画(https://t.co/vAXC8u0r5q)も良いけど、この回答がそのリンクも含めていて完璧なのでメモ(前見たけどまた見返し)。https://t.co/iQg3H8N6kJ
What is the difference between functions and classes to create reusable widgets? pic.twitter.com/FSPf6ddikf

— mono (@_mono) March 18, 2022

Widgetクラスを使った分割は利点が多く、
ヘルパー関数を使った分割はすこしコード量を減らせる程度。

分割方法とその違い

分割方法としては

1. Widgetクラスを使って分割
2. ヘルパー関数を使って分割

の2つがあり、Widgetクラスを使うほうがよいとのこと。

stack overflowにも以下のようなまとめあり、わかりやすい。

・flutter - What is the difference between functions and classes to create reusable widgets? - Stack Overflow

■Widgetクラスを使った分割

• パフォーマンスが最適化される(constコンストラクタ、きめ細かいリビルド)
• レイアウト切替時のリソースす更新の正確さ(ヘルパー関数は前の状態を再利用する可能性がある)
• ホットリロードが機能することが保証(ヘルパー関数だと中断される可能性がある)
• Widgetインスペクタに統合される
  • devtoolのウィジェットツリーにClassWidgetが表示される
  • debugFillPropertiesをオーバーライドして、ウィジェットに渡されるパラメーターを出力できる
• よりよいエラーメッセージ
  • 例外発生時、現在構築中のWidget名を表示する。
  • ヘルパー関数だとどこかわかりづらくなる
• keysを定義できる
• context APIを利用できる

■ヘルパー関数を使った分割

• コード量を少し減らせる
  • functional_widgetを使うことでも解決可能

また、YoutubeにWidget分割に関する動画が用意されていて、
UITestについてもWidgetクラスを使った分割のほうが書きやすいとのこと。
・Widgets vs helper methods | Decoding Flutter - YouTube

以上!!

参考にしたサイトさま

• https://twitter.com/_mono/status/1504959316499247112
• flutter - What is the difference between functions and classes to create reusable widgets? - Stack Overflow
• Widgets vs helper methods | Decoding Flutter - YouTube