SliverGridDelegate

Dua Delegate, Dua Filosofi

Modul sebelumnya memakai SliverGridDelegateWithFixedCrossAxisCount: jumlah kolom tetap, misalnya selalu 2. Itu bagus kalau desainmu menuntut tepat 2 kolom di semua perangkat, tapi kaku: di tablet lebar, 2 kolom raksasa terlihat kosong.

SliverGridDelegateWithMaxCrossAxisExtent membalik cara berpikirnya: bukan "berapa kolom?", melainkan "berapa lebar maksimum tiap sel?". Flutter lalu menghitung sendiri jumlah kolom dari lebar layar yang tersedia. Satu baris kode, dan gridmu responsif di HP, tablet, dan desktop.

Contoh 1: Galeri Responsif Otomatis

GridView.builder(
  padding: const EdgeInsets.all(12),
  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 150,
    crossAxisSpacing: 12,
    mainAxisSpacing: 12,
    childAspectRatio: 1,
  ),
  itemCount: foto.length,
  itemBuilder: (context, index) => ClipRRect(
    borderRadius: BorderRadius.circular(8),
    child: Image.network(foto[index], fit: BoxFit.cover),
  ),
)

Dengan maxCrossAxisExtent: 150: di HP 360px lebar muncul 2 kolom, di tablet 800px muncul 5 kolom, tanpa satu baris kode kondisional pun. childAspectRatio: 1 membuat tiap sel persegi.

Contoh 2: Menu Dashboard Adaptif dengan Tinggi Pasti

Untuk kartu menu berisi ikon + label, tinggi sel lebih mudah diprediksi daripada rasio. Pakai mainAxisExtent untuk menetapkan tinggi sel secara langsung:

GridView.builder(
  padding: const EdgeInsets.all(16),
  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 180,
    mainAxisExtent: 120,
    crossAxisSpacing: 12,
    mainAxisSpacing: 12,
  ),
  itemCount: menu.length,
  itemBuilder: (context, index) {
    final m = menu[index];
    return Card(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(m.ikon, size: 32, color: Colors.deepPurple),
          const SizedBox(height: 8),
          Text(m.nama, style: const TextStyle(fontSize: 13)),
        ],
      ),
    );
  },
)

Edge Cases

• maxCrossAxisExtent bukan lebar yang dijamin. Flutter membagi lebar yang tersedia menjadi kolom-kolom yang lebarnya tidak melebihi nilai itu. Contoh: layar 360px dengan maxCrossAxisExtent: 200 menghasilkan 1 kolom selebar 360px (melebar penuh), bukan sel 200px. Kalau kamu butuh tepat N kolom, kembali ke FixedCrossAxisCount.
• Rotasi layar menghitung ulang otomatis, tapi posisi scroll bisa melompat karena jumlah item per baris berubah. Untuk grid panjang, pasang PageStorageKey agar posisi scroll tersimpan saat rotasi.
• mainAxisExtent mengalahkan childAspectRatio. Kalau keduanya diisi, yang dipakai adalah mainAxisExtent dan rasio diabaikan. Pilih salah satu saja supaya tidak membingungkan.

Kapan JANGAN Memakai MaxCrossAxisExtent

• Desain menuntut tepat N kolom di semua ukuran, misalnya tombol kalkulator yang harus selalu 4 kolom: pakai SliverGridDelegateWithFixedCrossAxisCount.
• Sel dengan tinggi sangat bervariasi (grid ala Pinterest): pakai MasonryGridView dari package flutter_staggered_grid_view. Tapi sadari biayanya: layout non-seragam lebih berat dihitung dan lebih sulit diprediksi, jadi hindari untuk daftar yang sangat panjang atau sering berubah.

Praktik Terbaik

• Untuk aplikasi yang jalan di web atau desktop dengan lebar jendela bebas, MaxCrossAxisExtent hampir selalu pilihan yang tepat.
• Uji di minimal tiga lebar: HP kecil (360px), HP besar (430px), dan tablet (800px ke atas). Putar emulator ke landscape dan pastikan tidak ada sel yang terlihat aneh.
• Kombinasikan dengan SliverGrid di dalam CustomScrollView kalau grid hanyalah satu bagian dari halaman scroll yang kompleks.

Catatan teknis: Kedua delegate ini juga tersedia untuk SliverGrid (bukan cuma GridView), jadi pengetahuan ini langsung terpakai saat kamu naik ke CustomScrollView dan sliver.