Flutter SizedBoxの使い方｜余白・固定サイズ・スペーサーの基本

SizedBoxは、Flutterで固定サイズや余白を作るためのシンプルなWidgetです。Containerでも同じことはできますが、サイズや余白だけが目的ならSizedBoxの方が意図が明確になります。

この記事の結論

SizedBoxは「幅・高さを決める」「空白を作る」ために使います。装飾が必要ならContainer、余白だけならSizedBoxと使い分けると読みやすくなります。

固定サイズを指定する

SizedBox(
  width: 200,
  height: 80,
  child: ElevatedButton(
    onPressed: () {},
    child: const Text("ボタン"),
  ),
)

Widget間の余白を作る

ColumnやRowの中で、ちょっとした余白を作るならSizedBoxが分かりやすいです。

Column(
  children: const [
    Text("タイトル"),
    SizedBox(height: 16),
    Text("本文"),
  ],
)

横方向のスペースを作る

Row(
  children: const [
    Icon(Icons.info),
    SizedBox(width: 8),
    Text("お知らせ"),
  ],
)

Containerとの違い

• SizedBox：サイズや空白だけを表したい時
• Container：背景色、枠線、角丸、余白などもまとめたい時
• Padding：内側余白だけを明示したい時
• Spacer：RowやColumn内の残り空間を使いたい時

実装後に確認すること

• 装飾が不要なのにContainerを使っていないか
• 縦余白と横余白を分けて考えているか
• 親Widgetの制約でサイズが無視されていないか
• 可変レイアウトでは固定値を使いすぎていないか

よくあるつまずき

• 空白目的でContainerを多用する
• 固定サイズを入れすぎて小さい画面ではみ出す
• Row内で横幅を取りすぎる
• SizedBox.expandの意味を知らずに使う

次に読む記事

• Flutter Containerの使い方｜余白・背景色・サイズ指定の基本 — FlutterのContainerを初心者向けに解説します。サイズ、余白、背景色、角丸、中央配置など、画面レイアウトでよく使う基本を整理します。
• Flutter ListViewの使い方｜縦スクロール・横スクロール・builderの違い — FlutterのListViewを初心者向けに解説します。childrenで作る基本、ListView.builderとの違い、横スクロール、Column内での注意点を整理します。
• Flutter StatefulWidgetの使い方｜状態を持つ画面を作る基本 — FlutterのStatefulWidgetを初心者向けに解説します。StatelessWidgetとの違い、Stateクラス、setState、カウンター例を使って状態更新の流れを整理します。

まとめ

SizedBoxは、Flutterのレイアウトを読みやすくする基本Widgetです。余白や固定サイズを明示したい場面で使い、装飾が必要な時はContainerと使い分けましょう。