- Flutterのレイアウトはhtmlのレイアウトとは大きく異なる
- Flutterのレイアウトのルール: Constraints go down. Sizes go up. Parent sets position. (制約が減る。サイズが上がる。親が位置を決める。)
- minimum and maximum width
- minimum and maximum height
- ウィジェットは、親から自身の制約を得る
- ウィジェットはそれ自身の子リストを調べる 1つずつ、ウィジェットはその子に制約を伝え（それぞれの子で異なる場合があります）、それぞれの子にサイズを尋ねる
- ウィジェットは、その子を1つずつ（x軸方向に水平に、y軸方向に垂直に）配置する。
- 最後に、ウィジェットは自分のサイズを親に伝える（もちろん、元の制約の範囲内で）。
- ウィジェットは、親から与えられた制約の中でしか、自分のサイズを決めることができない。 つまり、ウィジェットは通常、好きなサイズを持つことができない
- ウィジェットの位置を決めるのはウィジェットの親ウィジェット。 ウィジェットは画面内の自分の位置を知ることも決めることもできない。
- 親のサイズと位置は、その親にも依存するので、ツリー全体を考慮せずに、ウィジェットのサイズと位置を正確に定義することは不可能。
- 子が親と異なるサイズを望み、親がそれを整列させるのに十分な情報を持っていない場合、子のサイズは無視されるかもしれない。 アライメントを定義するときは具体的にする必要がある。
Flutterでは、ウィジェットはその下にあるRenderBoxによってレンダリングされる。 Flutterでは、いくつかののボックス、特に1つの子を取るだけのボックスは、その制約を子に渡す。
一般的に、制約をどのように扱うかという観点から、3種類のボックスがある：
- できるだけ大きくしようとするもの
例えば、
CenterやAlign、ListViewで使われるボックス。 - 子と同じサイズになろうとするもの
例えば、
TransformやOpacityで使用されるボックス。 - 特定のサイズになろうとするもの
例えば、
ImageやTextで使用されるボックス。
ウィジェットの中には、例えばContainerのように、コンストラクタの引数によって型が変わるものがあります。 Containerのコンストラクタのデフォルトは、可能な限り大きくなろうとしますが、例えば幅を与えると、それを尊重して特定のサイズになろうとします。
その他、例えば行や列（フレックスボックス）は、与えられた制約に基づいて変化します。