Flexible: apa itu, prinsip kerja dan konfigurasi dalam pengembangan mobile

Apa itu Flexible

Flexible — widget pembungkus yang memberikan elemen anak ruang fleksibel di kontainer Flex. Flexible, seperti Expanded, berpartisipasi dalam distribusi ruang kosong, tetapi dengan perbedaan kunci: anak Flexible dapat menempati lebih sedikit ruang daripada yang dialokasikan, jika ukurannya sendiri lebih kecil dari ruang yang tersedia.

Flexible menggunakan algoritma Flex Flutter untuk menghitung ruang yang tersedia. Pertama, framework menanyai semua anak yang tidak fleksibel (widget tanpa Flexible/Expanded) dan menghitung intrinsic size mereka. Ruang yang tersisa dibagi di antara anak-anak yang fleksibel secara proporsional dengan flex-factor mereka. Setelah alokasi ruang, Flexible memeriksa fit — jika loose, batasan “tidak lebih dari yang dialokasikan” diterapkan ke elemen anak, memungkinkannya tetap kecil.

Keistimewaan Flexible: jika widget anak memiliki ukuran minimum sendiri (misalnya, Text dengan string panjang), Flexible mengalokasikan ruang yang diminta, tidak meregangkannya secara paksa. Ini membuat Flexible tak tergantikan untuk elemen yang ukurannya harus ditentukan oleh konten, bukan oleh kontainer.

Kesimpulan: gunakan Flexible ketika perlu menyediakan ruang untuk elemen, tetapi tidak memaksanya untuk meregang. Ini mempertahankan ukuran alami konten dalam distribusi layout yang fleksibel.

FlexFit.tight vs FlexFit.loose

FlexFit — enumerasi dari dua nilai: tight dan loose. Dari pilihan fit tergantung apakah widget anak akan dipaksa meregang ke ukuran ruang yang dialokasikan.

FlexFit.tight: elemen anak menerima tight constraints — ukuran minimum dan maksimum sama dengan ruang yang dialokasikan. Anak harus menempati persis sebanyak ruang yang dialokasikan oleh algoritma Flex. Jika anak lebih kecil — diregangkan. Jika lebih besar — ditekan. Perilaku identik dengan Expanded.

FlexFit.loose: elemen anak menerima loose constraints — ukuran minimum adalah 0, maksimum sama dengan ruang yang dialokasikan. Anak bisa berukuran berapa pun dari 0 hingga maximum. Jika anak kecil (misalnya, Text dengan string pendek), ia mengambil lebar alaminya, dan sisa ruang tetap kosong.

Kesimpulan: FlexFit.loose — pilihan untuk blok teks dan elemen dengan ukuran alami. FlexFit.tight — untuk layout kolom ketat di mana semua elemen harus memiliki lebar atau tinggi yang sama.

Kapan menggunakan Flexible daripada Expanded

Flexible dan Expanded terlihat mirip, tetapi menyelesaikan tugas yang berbeda. Expanded selalu meregangkan anak ke seluruh ruang yang tersedia. Flexible dapat meninggalkan ruang kosong di sekitar anak jika ukuran konten lebih kecil dari bagian yang dialokasikan.

Skenario untuk Flexible: di dalam Row terdapat dua tombol. Pertama — “Beli” (teks pendek), kedua — “Tambah ke Keranjang” (teks panjang). Dengan Expanded kedua tombol akan meregang ke lebar yang sama, dan teks pendek akan memiliki margin yang besar. Dengan Flexible setiap tombol akan mengambil lebar teksnya, dan ruang kosong akan tetap di antara mereka atau di tepi.

Skenario untuk Expanded: di dalam Column terdapat tiga kartu yang harus memiliki tinggi yang sama terlepas dari kontennya. Expanded membagi tinggi yang tersedia secara merata dan setiap kartu meregang ke ukuran yang sama. Flexible dengan loose tidak cocok di sini — kartu kecil akan tetap kecil, melanggar desain yang seragam.

Kesimpulan: pilih Flexible ketika konten menentukan ukuran elemen dan ruang kosong di sekitarnya dapat diterima. Pilih Expanded ketika semua elemen harus berukuran sama terlepas dari konten.

Contoh kode dengan Flexible

Contoh 1 mendemonstrasikan penggunaan dasar Flexible dengan FlexFit.loose di Row.

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('pendek'),
      ),
    ),
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.cyan,
        child: const Text('teks panjang untuk demo'),
      ),
    ),
  ],
)

Dalam contoh, kedua Flexible dengan loose fit. Kontainer pertama dengan teks pendek mengambil lebar alaminya. Kedua dengan teks panjang — lebar miliknya. Row mengalokasikan masing-masing setengah dari lebar yang tersedia, tetapi loose fit memungkinkan kontainer lebih kecil, dan ruang kosong tetap kosong di antara mereka.

Contoh 2 — perbandingan Flexible dengan Tight dan Loose fit di Column.

Column(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: const Card(
        child: ListTile(
          title: Text('Tight — diregangkan setinggi penuh'),
        ),
      ),
    ),
    const SizedBox(
      height: 8,
    ),
    Flexible(
      fit: FlexFit.loose,
      child: const Card(
        child: ListTile(
          title: Text('Loose — tinggi alami'),
        ),
      ),
    ),
  ],
)

Di Column, Flexible pertama (tight) meregangkan Card ke setengah dari tinggi yang tersedia. Flexible kedua (loose) — Card mengambil tinggi sesuai konten, dan sisa ruang tetap kosong. Secara visual terlihat bagaimana tight mengisi area secara paksa, sementara loose mempertahankan ukuran yang kompak.

Kesimpulan: dalam kode produksi, Flexible dengan loose diterapkan untuk bidang formulir, tombol, dan blok teks. Flexible dengan tight — setara dengan Expanded, digunakan untuk distribusi yang merata.

Kesalahan umum saat menggunakan Flexible

Kesalahan 1: menggunakan Flexible di luar kontainer Flex. Seperti Expanded, Flexible melempar LayoutException jika tidak berada di dalam Row, Column, atau Flex. Solusi: selalu periksa rantai induk widget.

Kesalahan 2: kebingungan antara Flexible dan Expanded. Pengembang sering menggunakan Expanded ketika Flexible dengan loose fit diperlukan, dan sebaliknya. Hasil: Expanded meregangkan elemen dengan teks pendek, menciptakan bidang kosong yang besar. Solusi: jika ukuran elemen bisa lebih kecil dari ruang yang dialokasikan — gunakan Flexible(fit: FlexFit.loose).

Kesalahan 3: flex-factor nol. Flexible dengan flex=0 berperilaku seperti widget yang tidak fleksibel, yang mungkin tidak jelas. Pengembang mengharapkan perilaku fleksibel, tetapi elemen mengambil ukuran minimum. Solusi: flex harus ≥1 untuk distribusi ruang yang aktif.

Kesalahan 4: Flexible di dalam ScrollView tanpa batasan ukuran. Jika Flexible berada di Column di dalam SingleChildScrollView, kontainer scroll memberikan ruang tak terbatas, dan distribusi flex tidak berfungsi. Solusi: batasi ukuran kontainer scroll melalui SizedBox atau ConstrainedBox.

Kesimpulan: Flexible memerlukan perhatian yang sama pada konteks induk seperti Expanded. Perbedaannya hanya pada fit — pilih secara sadar tergantung pada tugas.