[Flutter]LayoutBuilderについての個人的まとめ

LayoutBuilder とは

LayoutBuilderとは, 「レスポンシブをやりやすくするもの」

使い所

• 画面の幅によってレイアウトエラーが起きちゃうな、

とかって言う時に便利に使える。

自分は実務ではこれ使わずに分岐によって(Vertical/Horizontal)Widgetを分けていた。それでもできる。だがLayoutBuilderを使えるようにした方が絶対いい

できることと、その使い方

できることで特に重要なのが

• widgetが構築(Build)できる範囲を事前に知ることができる

こと。

まず

1. builder:を引数にとれる。これはbuildメソッドで、(Widget build(){~} でツリーを構築するメソッドで、)ウィジェットツリーを構築時(レイアウト)時に呼び出される

2. builder:(){~} の引数として、constraintsが渡され、constraintsはそのwidgetの高さや幅に関する情報を扱える
   

3. constraintsはそのwidgetの高さや幅に関する情報を扱えるので、
   constraints.メソッドとすることで条件式を立てれたりして、幅が広がる。

上記の画像のコードのようにif (constraints.maxWidth < 600){~}
的な感じでif文とレイアウトの境界値でどんどん場合分けしていくことで数段レスポンシブが見やすくなると感じた。

[考察]
ただ上のようにIf文で分けた方が良いのは、レイアウトがだいぶ変わる時かなと思ふ。自分が実務の場合では使わなかったように、レイアウトが画面幅によってそんな変わらん感じなら、三項演算子とかでぱぱっとわけりゃいいのかもとか思ったであります。


以上です。間違えが見つかり次第、或いは知識がアップデートされ次第改訂していきます。🙏

参考記事

参考記事