Expanded: apa itu, prinsip kerja di Flutter

Apa itu Expanded

Expanded adalah widget pembungkus yang menerima child dan memaksanya untuk memperluas diri mengisi ruang yang tersedia di kontainer Flex (Row, Column, Flex). Expanded tidak memiliki representasi visual sendiri — ia hanya mengelola constraints yang diteruskan ke elemen anak.

Di dasar Expanded terdapat mekanisme Flex yang disediakan oleh framework Flutter. Ketika Row atau Column menghitung ukuran anak-anak mereka, pertama-tama mereka mengalokasikan ruang ke elemen yang tidak fleksibel (widget biasa dengan ukuran tetap), dan ruang yang tersisa didistribusikan antara anak-anak Expanded dan Flexible secara proporsional dengan faktor flex mereka.

Expanded menggunakan Flexible.fit = FlexFit.tight. Ini berarti anak dari Expanded harus menempati semua ruang yang dialokasikan, bahkan jika ukurannya sendiri lebih kecil. Berbeda dengan Flexible dengan Fit.loose, di mana anak bisa lebih kecil dari area yang dialokasikan, Expanded memaksa peregangan konten.

Kesimpulan: Expanded adalah alat utama untuk membuat tata letak proporsional di Flutter. Gunakan ketika Anda ingin elemen dijamin menempati semua lebar atau tinggi yang tersedia.

Expanded vs Flexible: perbedaan utama

Expanded dan Flexible — keduanya mendistribusikan ruang di kontainer Flex, tetapi berperilaku secara fundamental berbeda. Perbedaannya terletak pada properti fit, yang menentukan apakah anak bisa lebih kecil dari ruang yang tersedia.

Expanded memiliki model perilaku yang kaku: fit-nya sama dengan FlexFit.tight. Ini berarti widget anak menerima constraints yang sama dengan ruang yang tersedia — tidak lebih, tidak kurang. Jika anak lebih kecil, ia diregangkan. Jika lebih besar — ia ditekan. Flexible menggunakan FlexFit.loose, memungkinkan elemen anak memiliki ukuran berapa pun dalam batas ruang yang dialokasikan.

Dalam praktiknya: jika di dalam Row terdapat dua Expanded dengan flex=1, masing-masing akan menempati tepat setengah lebar. Jika Anda menggantinya dengan Flexible dengan fit.loose, setiap anak bisa lebih kecil dari setengah jika ukurannya sendiri lebih kecil — ruang yang tersisa akan tetap kosong.

Kesimpulan: gunakan Expanded untuk tata letak proporsional yang ketat, Flexible — ketika anak bisa lebih kecil dari ruang yang tersedia. Jika tidak yakin — mulailah dengan Expanded, ia memberikan perilaku yang lebih dapat diprediksi.

Faktor Flex: bagaimana ruang didistribusikan

Faktor Flex (parameter flex) — nilai numerik yang menentukan bagian ruang yang tersedia yang akan diterima Expanded. Secara default flex=1, yang berarti distribusi merata di antara semua anak Expanded.

Algoritma distribusi bekerja dalam tiga langkah. Pertama: Flutter menghitung intrinsic size dari semua anak yang tidak fleksibel. Kedua: ruang yang tersisa dibagi dengan jumlah semua faktor flex. Ketiga: setiap Expanded menerima bagian yang sama dengan faktor flex-nya dikalikan dengan ukuran satu unit flex.

Misalnya, Row dengan lebar 300px berisi dua Expanded: pertama dengan flex=2, kedua dengan flex=1. Ruang kosong (300px dikurangi anak tidak fleksibel) dibagi menjadi 3 bagian. Pertama mendapat 2/3, kedua — 1/3. Jika tidak ada anak tidak fleksibel, pertama akan mendapat 200px, kedua — 100px.

Faktor flex dapat berupa bilangan bulat positif apa pun. Nilai 0 adalah kasus khusus: Expanded dengan flex=0 berperilaku seperti widget tidak fleksibel biasa, menempati ruang minimal sesuai ukuran anak. Perilaku ini setara dengan tidak adanya Expanded.

Kesimpulan: faktor flex adalah kunci untuk membangun tata letak yang fleksibel. Gunakan rasio 1:1 untuk kolom yang sama, 2:1 untuk panel dengan area utama dan samping, 3:1 untuk antarmuka dengan navigasi sempit.

Contoh kode dengan Expanded

Contoh 1 mendemonstrasikan penggunaan dasar Expanded di Row untuk membuat tiga kolom yang sama.

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)

Dalam contoh ini, tiga Expanded dengan flex=1 (default) membagi lebar Row secara merata. Kontainer meregang hingga seluruh tinggi yang ditetapkan oleh Row dan menempati bagian yang sama. Pendekatan ini nyaman untuk membuat tata letak kolom dengan distribusi proporsional.

Contoh 2 menunjukkan penggunaan faktor flex yang berbeda untuk membuat tata letak dengan panel samping dan konten utama.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Panel samping'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('Area konten'),
        ),
      ),
    ),
  ],
)

Contoh kedua membuat layout tipikal dengan panel samping (25%) dan area utama (75%). flex=1 dan flex=3 memberikan rasio 1:3. Saat lebar layar berubah, proporsi dipertahankan secara otomatis — ini adalah dasar dari antarmuka adaptif.

Kesimpulan: Expanded dengan faktor flex yang berbeda adalah alat standar untuk membangun tata letak adaptif. Kombinasi Expanded di Column memungkinkan pembuatan tata letak proporsional baik horizontal maupun vertikal.

Kesalahan umum saat menggunakan Expanded

Kesalahan 1: menggunakan Expanded di luar Row, Column, atau Flex. Jika Anda menempatkan Expanded langsung di Stack, ListView, atau kontainer lain yang bukan Flex, Flutter melemparkan LayoutException dengan pesan “Expanded widgets must be placed inside Flex widgets”. Solusi: periksa widget induk — hanya Row, Column, atau Flex.

Kesalahan 2: menempatkan Expanded di dalam ListView tanpa menentukan shrinkWrap. ListView secara default memiliki tinggi tak terbatas dalam arah scroll, dan Expanded tidak dapat menghitung bagiannya. Solusi: gunakan shrinkWrap: true atau bungkus ListView dalam SizedBox dengan tinggi tetap.

Kesalahan 3: beberapa Expanded dengan total flex melebihi ruang yang tersedia. Jika di dalam Row dengan lebar terbatas terdapat Expanded serta widget dengan intrinsic size besar, overflow dapat terjadi. Solusi: periksa ukuran minimum anak tidak fleksibel dan jika perlu gunakan FittedBox atau Flex fit.

Kesalahan 4: Expanded bersarang di Column di dalam Row. Jika Expanded di dalam Column berisi Expanded lain di dalam Row, dapat terjadi konflik constraints. Solusi: batasi kedalaman bersarang atau gunakan ConstrainedBox untuk menentukan ukuran secara eksplisit di tingkat menengah.

Kesimpulan: Expanded memerlukan konteks induk yang tepat. Selalu periksa bahwa Expanded berada langsung di Row, Column, atau Flex dan hindari bersarang tanpa ukuran eksplisit.