Flutterレイアウトの仕組み — 制約は下へ、サイズは上へ
Row、Column、Stack、FlexでUI配置
FlutterレイアウトはCSS Flexboxに似ていますが、全てがウィジェットベースです。
Row（横配置）、Column（縦配置）、Stack（重ね配置）が基本3要素で、ExpandedとFlexibleで残りスペースを分配します。
レイアウトのコア規則：親が子に制約条件（Constraints）を渡し、子はその中で自分のサイズ（Size）を決定し、親が最終位置を定めます。
実装ステップ
1
Row/Columnで基本的な水平/垂直配置を練習
2
Expanded/Flexibleで比率ベースのスペース分配
3
Stack + Positionedでオーバーレイ UI実装
4
LayoutBuilderとMediaQueryでレスポンシブレイアウト実装
メリット
- ✓ CSSより予測可能なレイアウト動作
- ✓ DevToolsでレイアウトデバッグが視覚的に容易
デメリット
- ✗ Unboundedエラー（Column内のListViewなど）初心者がよく遭遇
- ✗ ネストが深くなると可読性低下
ユースケース
ログイン/会員登録フォームレイアウト
ダッシュボードカードグリッド配置