📏 Padding & Margin

1. Padding Widget

Tạo khoảng cách bên trong widget:

Padding(
  padding: EdgeInsets.all(16),
  child: Text('Padded Text'),
)

---

2. EdgeInsets Options

// Tất cả các cạnh
EdgeInsets.all(16)

// Chỉ định từng cạnh
EdgeInsets.only(left: 10, top: 20, right: 10, bottom: 20)

// Đối xứng
EdgeInsets.symmetric(horizontal: 20, vertical: 10)

// LTRB (Left, Top, Right, Bottom)
EdgeInsets.fromLTRB(10, 20, 10, 20)

// Zero
EdgeInsets.zero

---

3. Margin với Container

Container có property margin cho khoảng cách bên ngoài:

Container(
  margin: EdgeInsets.all(16),
  padding: EdgeInsets.all(8),
  color: Colors.blue,
  child: Text('Content'),
)

---

4. Padding vs Margin

Container(
  margin: EdgeInsets.all(10),   // Khoảng cách NGOÀI border
  padding: EdgeInsets.all(10),  // Khoảng cách TRONG border
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black),
  ),
  child: Text('Content'),
)

┌─────────────────────────────┐
│         MARGIN              │
│   ┌───────────────────┐     │
│   │     BORDER        │     │
│   │  ┌─────────────┐  │     │
│   │  │  PADDING    │  │     │
│   │  │ ┌─────────┐ │  │     │
│   │  │ │ CONTENT │ │  │     │
│   │  │ └─────────┘ │  │     │
│   │  └─────────────┘  │     │
│   └───────────────────┘     │
└─────────────────────────────┘

---

5. SizedBox cho Spacing

Thay vì Padding, dùng SizedBox cho spacing giữa widgets:

Column(
  children: [
    Text('Title'),
    SizedBox(height: 16),  // Spacing dọc
    Text('Subtitle'),
    SizedBox(height: 8),
    Text('Content'),
  ],
)

Row(
  children: [
    Icon(Icons.star),
    SizedBox(width: 8),  // Spacing ngang
    Text('Rating'),
  ],
)

---

6. Spacer Widget

Chiếm không gian còn lại (giống Expanded nhưng không có child):

Row(
  children: [
    Text('Left'),
    Spacer(),      // Đẩy ra hai bên
    Text('Right'),
  ],
)

// Với flex
Row(
  children: [
    Text('Left'),
    Spacer(flex: 1),
    Text('Center'),
    Spacer(flex: 2),  // Gấp đôi không gian bên trái
    Text('Right'),
  ],
)

---

7. Safe Area Padding

Tránh notch, status bar, navigation bar:

SafeArea(
  child: Column(
    children: [
      Text('Safe content'),
    ],
  ),
)

Chỉ safe một số cạnh

SafeArea(
  top: true,
  bottom: false,
  left: true,
  right: true,
  child: Content(),
)

---

8. MediaQuery Padding

Lấy system padding thủ công:

@override
Widget build(BuildContext context) {
  final padding = MediaQuery.of(context).padding;

  return Padding(
    padding: EdgeInsets.only(top: padding.top),
    child: Content(),
  );
}

---

9. Sliver Padding

Trong CustomScrollView:

CustomScrollView(
  slivers: [
    SliverPadding(
      padding: EdgeInsets.all(16),
      sliver: SliverList(...),
    ),
  ],
)

---

10. Best Practices

Sử dụng constants

class AppSpacing {
  static const xs = 4.0;
  static const sm = 8.0;
  static const md = 16.0;
  static const lg = 24.0;
  static const xl = 32.0;
}

// Sử dụng
Padding(
  padding: EdgeInsets.all(AppSpacing.md),
  child: Text('Consistent'),
)

Padding cho toàn page

Scaffold(
  body: Padding(
    padding: EdgeInsets.symmetric(horizontal: 16),
    child: Column(
      children: [
        // Content không cần padding riêng
      ],
    ),
  ),
)

---

📝 Tóm tắt

Widget/Property	Mục đích
Padding	Khoảng cách bên trong
Container.margin	Khoảng cách bên ngoài
SizedBox	Spacing cố định
Spacer	Chiếm không gian còn lại
SafeArea	Tránh system UI

EdgeInsets	Mô tả
.all(x)	Tất cả cạnh
.symmetric()	Đối xứng
.only()	Chỉ định từng cạnh
.fromLTRB()	Left, Top, Right, Bottom