Flutter Paddingの使い方｜内側余白を指定する基本

Paddingは、Widgetの内側に余白を作るための専用Widgetです。

この記事の結論

余白だけが目的ならContainerよりPaddingを使うと意図が明確になります。

全方向に余白を入れる

EdgeInsets.allで四方に同じ余白を指定します。

Padding(
  padding: const EdgeInsets.all(16),
  child: Text("余白あり"),
)

上下左右を分ける

symmetricやonlyで方向別に指定できます。

Padding(
  padding: const EdgeInsets.symmetric(
    horizontal: 16,
    vertical: 8,
  ),
  child: Text("ボタン風"),
)

Containerとの違い

装飾が不要ならPadding、背景や枠線も必要ならContainerを使います。

Container(
  padding: const EdgeInsets.all(16),
  color: Colors.blue,
  child: const Text("背景あり"),
)

実装後に確認すること

• 画面上で余白や入力が意図通りか確認したか
• 小さい画面で崩れないか確認したか
• 状態管理や画面遷移の責務を混ぜすぎていないか
• 関連するWidgetとの使い分けを説明できるか

よくあるつまずき

• 便利なWidgetに役割を詰め込みすぎる
• 固定サイズや固定余白だけで作る
• 入力値の破棄やバリデーションを忘れる
• ListViewやGridViewをColumn内で高さ指定なしに置く

次に読む記事

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

まとめ

Flutter Padding 使い方はFlutter UIを作るうえでよく使う基本です。最小コードで動きを確認し、関連Widgetと使い分けながら画面を組み立てましょう。