Containerは、Flutterの画面作りで最初に触ることが多いWidgetです。背景色、サイズ、余白、配置をまとめて指定できるため便利ですが、役割を詰め込みすぎると読みにくくなります。
この記事の結論
Containerは「1つの箱」を作るWidgetです。最初はwidth、height、padding、margin、color、decoration、alignmentの7つを押さえれば十分です。
最小のContainerを書く
Containerはchildを1つ持てます。まずはサイズと色を指定して、画面に箱が出ることを確認します。
Container(
width: 160,
height: 80,
color: Colors.blue,
child: const Center(
child: Text("Box"),
),
)paddingとmarginの違い
paddingはContainerの内側の余白、marginは外側の余白です。ボタンやカードの余白調整でよく使います。
Container(
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(24),
color: Colors.orange,
child: const Text("余白の例"),
)角丸や枠線を付ける
角丸や枠線を使う場合はcolorではなくdecorationの中で色を指定します。colorとdecorationのcolorを同時に指定しないようにします。
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(12),
),
child: const Text("カード風"),
)Containerを使いすぎない
サイズだけならSizedBox、余白だけならPadding、中央配置だけならCenterを使う方が意図が分かりやすい場合があります。Containerは便利ですが万能部品として使いすぎないようにします。
実装後に確認すること
- 箱のサイズが意図通りか
- 内側と外側の余白を混同していないか
- colorとdecorationの指定が衝突していないか
- より専用のWidgetで書けないか
よくあるつまずき
- Containerだけで全レイアウトを作ろうとする
- marginとpaddingを逆に考える
- decorationとcolorを同時に指定してエラーにする
- 親Widgetの制約を無視してサイズ指定する
次に読む記事
- Flutter SizedBoxの使い方｜余白・固定サイズ・スペーサーの基本 — FlutterのSizedBoxを初心者向けに解説します。固定サイズ、余白、Widget間のスペース、Containerとの違いを実装例で整理します。
- Flutter ListViewの使い方｜縦スクロール・横スクロール・builderの違い — FlutterのListViewを初心者向けに解説します。childrenで作る基本、ListView.builderとの違い、横スクロール、Column内での注意点を整理します。
- Flutter StatefulWidgetの使い方｜状態を持つ画面を作る基本 — FlutterのStatefulWidgetを初心者向けに解説します。StatelessWidgetとの違い、Stateクラス、setState、カウンター例を使って状態更新の流れを整理します。
まとめ
ContainerはFlutterのレイアウトを理解する入口です。サイズ、余白、装飾を確認したうえで、SizedBoxやPaddingなどの専用Widgetと使い分けましょう。