くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

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

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

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

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を利用できる

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

  • コード量を少し減らせる

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

以上!!

参考にしたサイトさま