MediaQuery — apa itu, prinsip kerja dan tata letak adaptif

Apa itu MediaQuery

MediaQuery — adalah widget dan kelas Flutter yang menyediakan data tentang lingkungan media aplikasi. MediaQuery membungkus seluruh aplikasi di widget root MaterialApp atau CupertinoApp, dan widget anak mana pun dapat mengakses data ini melalui MediaQuery.of(context).

Ketika Flutter menjalankan aplikasi, ia membuat instance MediaQueryData yang berisi semua metrik perangkat saat ini. Data ini diperbarui secara otomatis saat perubahan: rotasi perangkat, perubahan ukuran jendela (di desktop), munculnya keyboard, atau perubahan pengaturan aksesibilitas sistem. MediaQuery membangun ulang subpohon widget pada setiap perubahan data, memastikan adaptasi reaktif antarmuka.

MediaQueryData mencakup: size (ukuran layar), devicePixelRatio (kerapatan piksel), textScaleFactor (skala font dari pengaturan sistem), viewInsets (area yang tertutup keyboard), viewPadding (margin sistem), orientation (orientasi) dan platformBrightness (tema terang atau gelap).

Kesimpulan: MediaQuery — sumber informasi pusat perangkat di Flutter. Akses ke MediaQuery.of(context) adalah langkah pertama dalam membangun antarmuka adaptif apa pun.

Properti Utama MediaQueryData

MediaQueryData berisi puluhan properti, tetapi yang paling sering digunakan adalah yang memengaruhi pembangunan tata letak. Mari kita bahas yang utama.

Size — ukuran layar

MediaQuery.of(context).size mengembalikan objek Size dengan lebar dan tinggi layar dalam piksel independen perangkat (dip). Nilai-nilai ini tidak memperhitungkan margin sistem. Untuk perhitungan tata letak adaptif, size adalah metrik utama: berdasarkan itu breakpoints ditentukan untuk tata letak mobile, tablet, dan desktop.

ViewPadding — margin sistem

ViewPadding — margin yang disediakan sistem untuk status bar, notch (potongan layar), panel navigasi sistem, dan indikator rumah (di iOS). Tanpa memperhitungkan margin ini, konten bisa berada di bawah elemen sistem. MediaQuery.of(context).padding mengembalikan EdgeInsets yang harus diterapkan sebagai padding ke kontainer root halaman.

ViewInsets — area keyboard

ViewInsets — area layar yang tertutup oleh keyboard perangkat lunak. Untuk bidang input, sangat penting untuk melacak viewInsets.bottom untuk menaikkan konten di atas keyboard. Flutter menangani ini secara otomatis di scaffold, tetapi untuk tata letak kustom, harus menggunakan langsung MediaQuery.of(context).viewInsets.

Orientation — orientasi perangkat

Orientation — orientasi potret (portrait) atau lanskap (landscape). Ditentukan dengan membandingkan lebar dan tinggi: jika lebar lebih kecil dari tinggi — portrait, sebaliknya — landscape. Dalam kode produksi, orientasi digunakan untuk beralih antara tata letak vertikal dan horizontal elemen.

Kesimpulan: empat properti utama — size, viewPadding, viewInsets dan orientation — mencakup 90% tugas desain adaptif. Properti lainnya (textScaleFactor, platformBrightness, devicePixelRatio) digunakan untuk skenario spesifik.

Menggunakan MediaQuery untuk Tata Letak Adaptif

MediaQuery — dasar desain adaptif di Flutter. Melaluinya breakpoints ditentukan, layout beralih tergantung ukuran layar, dan margin disesuaikan untuk berbagai perangkat.

Skenario umum: aplikasi mobile harus menampilkan daftar produk. Di telepon (lebar < 600dp) — satu kolom. Di tablet (lebar 600–900dp) — dua kolom. Di desktop (lebar > 900dp) — tiga kolom. MediaQuery.of(context).size.width memungkinkan pemilihan jumlah kolom secara dinamis tanpa layar terpisah untuk setiap faktor bentuk.

Skenario kedua: memperhitungkan system gesture insets pada perangkat modern. Di iPhone dengan Dynamic Island atau Android dengan gesture navigation, margin sistem memakan sebagian layar. MediaQuery.of(context).padding mengembalikan nilai yang benar untuk setiap jenis perangkat, dan Scaffold secara otomatis menerapkannya melalui body. Untuk widget kustom, padding harus diteruskan secara eksplisit dari MediaQuery.

Skenario ketiga: adaptasi terhadap pengaturan aksesibilitas sistem. MediaQuery.of(context).textScaleFactor menunjukkan seberapa besar pengguna memperbesar font di pengaturan. Pada textScaleFactor > 1.3 tata letak bisa rusak — teks panjang keluar dari batas kartu. Tata letak adaptif harus memperhitungkan ini dan, jika perlu, beralih ke tata letak yang lebih sederhana.

Kesimpulan: MediaQuery — bukan hanya sumber metrik, tetapi alat untuk membangun antarmuka yang benar-benar adaptif. Gunakan untuk breakpoints, safe area, dan pertimbangan aksesibilitas.

Contoh Kode dengan MediaQuery

Contoh 1 menunjukkan cara mendapatkan ukuran layar dan menerapkan breakpoints untuk memilih jumlah kolom.

int getColumnCount(BuildContext context) {
  final width = MediaQuery.of(context).size.width;
  if (width > 900) return 3;
  if (width > 600) return 2;
  return 1;
}

Contoh di atas menunjukkan fungsi pemilihan jumlah kolom berdasarkan lebar layar. Breakpoints 600 dan 900 sesuai dengan standar Material Design yang diterima umum untuk telepon, tablet, dan desktop.

Contoh 2 — menggunakan MediaQuery dengan viewPadding untuk penempatan konten yang benar dengan memperhitungkan margin sistem.

Widget build(BuildContext context) {
  final padding = MediaQuery.of(context).padding;

  return Padding(
    padding: EdgeInsets.only(
      top: padding.top,
      left: padding.left,
      right: padding.right,
    ),
    child: const MyContent(),
  );
}

Dalam contoh ini, padding membungkus konten dalam Padding, menggunakan margin sistem. top memperhitungkan status bar dan notch, left/right — zona aman. bottom tidak disertakan karena Scaffold biasanya menangani navigasi bawah sendiri.

Contoh 3 — menentukan orientasi dan mengubah tata letak elemen.

Widget build(BuildContext context) {
  final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

  return isPortrait
      ? const Column(
          children: [HeaderBanner(), ContentList()],
        )
      : const Row(
          children: [HeaderBanner(), ContentList()],
        );
}

Dalam mode potret, elemen ditempatkan vertikal (Column), dalam lanskap — horizontal (Row). Pendekatan ini memberikan penggunaan ruang terbaik saat perangkat diputar.

Kesimpulan: MediaQuery — alat utama untuk membangun tata letak adaptif. Selalu perhitungkan margin sistem, breakpoints, dan orientasi saat mengembangkan antarmuka Flutter.

Kesalahan Umum saat Bekerja dengan MediaQuery

Kesalahan 1: memanggil MediaQuery.of(context) di luar konteks tempat MediaQuery diatur. Jika widget berada di atas MediaQuery di pohon, pemanggilan menyebabkan kesalahan runtime. Solusi: selalu panggil MediaQuery.of(context) di dalam widget yang dibungkus MaterialApp atau CupertinoApp, di mana MediaQuery diatur sebagai widget root.

Kesalahan 2: lupa safe area. Pengembang menggunakan MediaQuery.size untuk menempatkan elemen tanpa memperhitungkan margin sistem. Pada perangkat dengan notch atau gesture navigation, konten berada di bawah status bar. Solusi: kurangi MediaQuery.of(context).padding dari koordinat posisi.

Kesalahan 3: keterikatan kaku pada ukuran. Menggunakan MediaQuery.of(context).size.width untuk menentukan ukuran tepat elemen (width: size.width * 0.3) hanya berfungsi pada perangkat dengan satu faktor bentuk. Di desktop atau tablet, tata letak terlihat tidak alami. Solusi: gunakan breakpoints bersama Expanded dan Flexible untuk tata letak fleksibel, bukan persentase kaku.

Kesalahan 4: mengabaikan textScaleFactor. Saat pengguna memperbesar font sistem, antarmuka bisa rusak — teks keluar dari batas kontainer. Solusi: periksa MediaQuery.of(context).textScaleFactor dan pada nilai di atas 1.3 alihkan tata letak ke versi lebih sederhana dengan pengguliran.

Kesimpulan: MediaQuery — alat yang kuat namun halus. Perhitungkan margin sistem, orientasi, dan pengaturan aksesibilitas agar antarmuka terlihat benar di semua perangkat.