FlutterのLayoutをざっとまとめてみた

Flutterのレイアウト関連、調べてもすぐ忘れるので、
ざっとまとめてみた(*´ω｀*)

公式ドキュメントはこのあたり。

• Flutter widget index | Flutter
• Widget catalog | Flutter
  • こっちのほうがカテゴリに分かれててわかりやすい

Android開発者向けのガイドだと、
「LinearLayoutはRowやColumnWidgetに相当」
などが書いてあるので結びつけやすいかも。

• Flutter for Android developers | Flutter

Layout

• Layout widgets | Flutter

さらに3つに分かれてる。

• 子が複数: Multi-child layout widgets
• 子が一つ: Single-child layout widgets
• Sliver用: Sliver widgets

Sliver用は一旦、後回し。

子が複数 / Multi-child

基本

• Column
  • 縦に並べる
• Row
  • 横に並べる
• Wrap
  • Column/Rowのoverflow対応版
• ListView
  • スクロールできるリスト
• GridView
  • グリッドで並べる。スクロール可
• Table
  • スクロールできないGrid
• Stack
  • 上に重ねる配置
• IndexedStack
  • index付きのStack

上級向け

• LayoutBuilder
  • 親Widgetの制約(widthなど)を参照できるBuilder。レスポンシブ対応など
• Flow
  • 1方向のLayout。FlowDelegateを使ってカスタマイズ
• CustomMultiChildLayout
  • MultiChildLayoutDelegateをつかってフルカスタマイズ
• ListBody
  • 直接使わないっぽい？

子が1つ / Single-child

汎用/組み合わせ

• Container
  • padding/constraints/alignなどを一括で設定できる

配置

• Align
  • 右寄せ/左寄せなど。サイズ基準
• Baseline
  • ベースライン基準の配置。Textなど
• Center
  • 中央寄せ
• Padding
  • 余白/padding

サイズ

• SizedBox
  • width/heightを指定できる
  • SizedBox.expandやSizedBox.shrinkなども
• AspectRatio
  • アスペクト比のサイズ指定
• FractionallySizedBox
  • %指定のサイズ指定
• Expanded
  • Row/Cloum/Flexでexpandする

制約

• ConstainedBox
  • maxWidthなどの制約をつける
• LimitedBox
  • maxHeight/maxWidthを指定できる
• FittedBox
  • CSSのobject-fit的なの。BoxFitで指定

トランスフォーム

• Transform
  • 回転や移動など。cssのtransform的なの

上級者向け

• OverflowBox
  • 親よりも大きい、min/maxWidthなどを設定できる
  • 親が100x100で、子が200x200でもはみ出て表示できる
• SizedOverflowBox
  • サイズ指定のOverflowBox
• IntrinsicHeight
  • 子の高さを親に合わせる
• IntrinsicWidth
  • IntrinsicHeightの横幅版
• Offstage
  • 子を非表示のままサイズを計測できる
• CustomSingleChildLayout
  • SingleChildLayoutDelegateでフルカスタマイズ

---

以上!! とりあえず、ざっとながめてみたけど、いろいろあるね(*´ω｀*)