Mengatur Ukuran & Susunan: Padding, Expanded, Card & Stack

Padding: jarak di sekeliling widget

Selain lewat Container, jarak bisa diberikan dengan widget Padding yang sederhana:

Padding(
  padding: const EdgeInsets.all(16),
  child: Text('Ada jarak di sekelilingku'),
)

Expanded: berbagi ruang

Di dalam Row atau Column, bungkus anak dengan Expanded agar ia mengisi sisa ruang. Jika ada beberapa Expanded, ruang dibagi sesuai flex (perbandingan).

Row(
  children: [
    Expanded(flex: 2, child: Container(height: 60, color: Colors.teal)),
    Expanded(child: Container(height: 60, color: Colors.orange)),
  ],
)

Di sini kotak hijau mendapat 2 bagian dan kotak oranye 1 bagian (flex bawaan = 1), jadi lebar hijau dua kali lipat oranye — terlepas dari ukuran layar. Inilah cara membuat tampilan yang menyesuaikan lebar layar.

Card: kartu dengan bayangan

Card membuat kotak dengan sudut membulat dan bayangan tipis, cocok untuk kelompok informasi. Karena Card tidak memberi jarak dalam, isinya biasa dibungkus Padding:

Card(
  child: Padding(
    padding: const EdgeInsets.all(12),
    child: Text('Isi kartu'),
  ),
)

Stack: menumpuk widget

Kalau Column menyusun ke bawah dan Row ke samping, Stack menumpuk widget di atas satu sama lain (seperti kertas ditumpuk). Anak pertama paling bawah. Dengan Positioned kamu menempatkan anak pada posisi tertentu relatif terhadap Stack:

Stack(
  children: [
    Container(height: 120, color: Colors.teal),
    Positioned(
      right: 8,
      top: 8,
      child: Icon(Icons.star, color: Colors.amber),
    ),
  ],
)

Ikon bintang muncul di pojok kanan atas kotak hijau. Contoh nyata: lencana "baru" di atas foto produk.