search

RightonSK / flashcards_mobile_app

1 stars 0 forks source link

flutterのレイアウトについて調べて記事にする #65

Closed RightonSK closed 8 months ago

RightonSK commented 9 months ago

知りたいこと：

  1. docのどこを見ればwidgetのサイズがどのように決まるのか知りたい
  2. ウィジットがどのようにサイズを決めるのか知りたい

やること：

  1. boxconstraintsを調べる。(これを調べれば、flutterのレイアウトについて大まかに分かりそう)
  2. flutterアプリのレイアウトを設定するのに便利なツールflutter inspectorについて調べる(select widget modeわかりやすい)
RightonSK commented 9 months ago

2/1 box constraints(制約)についてはある程度理解できた。flutter inspectorでの各widgetが引き継いだconstraintsの見方も把握した。

まだ、widgetがどのようにサイズを決めるのか、についてどこで見れるのか分からないが、多くのwidgetは、制約の中の最大値を取ろうとすることがわかった。 Those that try to be as big as possible. For example, the boxes used by Center and ListView. Those that try to be the same size as their children. For example, the boxes used by Transform and Opacity. Those that try to be a particular size. For example, the boxes used by Image and Text.

RightonSK commented 9 months ago

2/2 constraintsについてはunderstanding constraintsを見て結構理解できた。 取り敢えず記事を真似ただけだけど、layoutbuilderとconstrainedboxを用いて望んだ結果を得ることが出来た。

chatgptにも説明してもらったので、そこを見れば詳しくわかるかも

https://qiita.com/kikuchy/items/1c95e1a3b2300ff44d21 https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

次回は、これがベストなのか?とlayout builderについて理解する