[Flutter] Paddingの使い方

FlutterでUIを作るとき、余白の順番は Padding → Border → Margin になっている。（これはHTMLも同じ順番）

Paddingは内側、Marginは外側、Borderはその境界だった。

PaddingとMarginの違い

境界はBorder、内側はPadding、外側はMargin。

• Padding = 内側の余白
• Margin = 外側の余白

EdgeInsetsの種類

• EdgeInsets.all(20) → 全方向に同じ余白
• EdgeInsets.symmetric(horizontal: 20, vertical: 16) → 横と縦を別で指定
• EdgeInsets.only(top: 10, left: 8) → 特定の方向だけ

return Card(
  child: Padding(
    padding: const EdgeInsets.symmetric(
      horizontal: 20,
      vertical: 16,
    ),
    child: Column(
      children: [
        Text(expense.title),
        const SizedBox(height: 4),
        Row(children: [...]),
      ],
    ),
  ),
);