Expanded dan Flexible: Mengatur Ruang Sisa

Masalah yang diselesaikan

Di dalam Row, setiap anak hanya selebar kebutuhannya. Sisa ruang horizontal terbuang sia-sia. Expanded memaksa anaknya mengisi semua sisa ruang yang tersedia.

Row(
  children: [
    const Icon(Icons.search),
    const SizedBox(width: 8),
    Expanded(
      child: TextField(
        decoration: const InputDecoration(hintText: 'Cari produk...'),
      ),
    ),
  ],
)

Ini pola search bar klasik: ikon tetap kecil, field pencarian melar mengisi sisa lebar layar di semua ukuran HP.

Flex factor: berbagi proporsional

Kalau ada beberapa Expanded, ruang dibagi proporsional sesuai flex (default 1):

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

Kotak teal mendapat dua pertiga lebar, kotak amber sepertiga. Ini cara membuat kolom proporsional tanpa menghitung piksel manual.

Expanded vs Flexible

Keduanya mirip, bedanya di aturan ukuran:

• Expanded sama dengan Flexible ber-fit: FlexFit.tight. Anak wajib mengisi penuh ruang yang dijatahkan.
• Flexible default-nya FlexFit.loose. Anak boleh lebih kecil dari jatahnya.

Row(
  children: [
    Flexible(
      child: Container(
        color: Colors.blue,
        height: 60,
        padding: const EdgeInsets.all(8),
        child: const Text('Bebas'),
      ),
    ),
    const Expanded(child: SizedBox(height: 60)),
  ],
)

Pakai Flexible saat anak punya ukuran natural yang ingin dipertahankan (misalnya teks pendek), pakai Expanded saat ingin memaksa mengisi ruang.

Spacer: jalan pintas

Butuh mendorong widget ke ujung? Spacer() adalah Expanded berisi SizedBox kosong. Sangat berguna untuk layout "kiri-kanan" tanpa menghitung.

const Row(
  children: [
    Text('Kasir'),
    Spacer(),
    Icon(Icons.notifications),
  ],
)

Catatan teknis: Expanded dan Flexible hanya boleh menjadi anak langsung dari Row, Column, atau Flex. Menaruhnya di dalam Container atau Stack menghasilkan error "Incorrect use of ParentDataWidget". Kalau butuh perilaku mirip di luar Flex, pakai SizedBox.expand atau atur constraints manual. Error ini membingungkan pemula karena pesannya teknis, tapi intinya: Expanded butuh parent Flex.