flutterpaddinglayoutMenengah3 mnt baca

Padding dan Margin: Mengatur Jarak

Beri napas pada UI dengan Padding dan margin, pahami EdgeInsets dan kapan memakai SafeArea.

Padding vs margin

Konsepnya sama seperti CSS. Padding adalah jarak di dalam widget, antara border dan konten. Margin adalah jarak di luar widget, antara widget dan tetangganya. Di Flutter, padding adalah widget tersendiri (Padding), sedangkan margin adalah properti milik Container.

dart
Container(
  margin: const EdgeInsets.only(bottom: 12),
  child: const Padding(
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    child: Text('Kartu dengan jarak rapi'),
  ),
)

EdgeInsets: semua varian

  • EdgeInsets.all(16): semua sisi 16.
  • EdgeInsets.symmetric(horizontal: 16, vertical: 8): kiri-kanan 16, atas-bawah 8.
  • EdgeInsets.only(left: 16, top: 8): sisi tertentu saja.
  • EdgeInsets.fromLTRB(16, 8, 16, 8): left, top, right, bottom berurutan.

Varian symmetric paling sering dipakai untuk kartu dan list item karena ringkas dan konsisten.

Jarak antar widget

Untuk jarak antar widget sebaris, SizedBox lebih idiomatis daripada Padding kosong:

dart
Column(
  children: const [
    Text('Judul'),
    SizedBox(height: 8),
    Text('Deskripsi'),
    SizedBox(height: 16),
    Text('Harga'),
  ],
)

Pola ini membuat ritme vertikal terbaca jelas. Tim yang rapi biasanya menyepakati skala spacing, misalnya kelipatan 4 atau 8, agar seluruh aplikasi konsisten.

SafeArea: hormati notch dan status bar

Di HP modern ada notch, punch hole, dan gesture bar. SafeArea memberi padding otomatis agar konten tidak tertutup.

dart
Scaffold(
  body: SafeArea(
    child: Column(
      children: const [
        Text('Aman dari notch'),
      ],
    ),
  ),
)

Perhatikan: Scaffold dengan AppBar biasanya tidak butuh SafeArea di body karena AppBar sudah menangani area atas. SafeArea paling berguna untuk halaman full-screen tanpa AppBar atau untuk bagian bawah layar.

Catatan teknis: Padding berlebihan di dalam ListView.builder untuk tiap item bisa dihitung ribuan kali saat scroll dan sedikit membebani layout. Untuk list panjang, lebih baik padding-nya ditaruh di level ListView (padding: milik ListView) atau di dalam item memakai Container yang ringan. Ini micro-optimization, tapi kebiasaan baik untuk aplikasi katalog dengan ribuan produk.