MediaQuery — nedir, çalışma prensibi ve uyarlanabilir düzenler

MediaQuery Nedir

MediaQuery, uygulamanın medya ortamı hakkında veri sağlayan bir Flutter widget'ı ve sınıfıdır. MediaQuery, tüm uygulamayı kök MaterialApp veya CupertinoApp widget'ında sarar ve herhangi bir alt widget, MediaQuery.of(context) aracılığıyla bu verilere erişebilir.

Flutter bir uygulamayı başlattığında, mevcut cihazın tüm metriklerini içeren bir MediaQueryData örneği oluşturur. Bu veriler, değişikliklerde otomatik olarak güncellenir: cihaz döndürme, pencere boyutlandırma (masaüstünde), klavye görünümü veya sistem erişilebilirlik ayarlarındaki değişiklikler. MediaQuery, herhangi bir veri değişikliğinde widget alt ağacını yeniden oluşturarak reaktif arayüz uyarlaması sağlar.

MediaQueryData şunları içerir: size (ekran boyutu), devicePixelRatio (piksel yoğunluğu), textScaleFactor (sistem ayarlarından yazı tipi ölçeği), viewInsets (klavye tarafından kapsanan alan), viewPadding (sistem kenar boşlukları), orientation (yön) ve platformBrightness (açık veya koyu tema).

Özet: MediaQuery, Flutter'da cihaz bilgilerinin merkezi kaynağıdır. MediaQuery.of(context)'e erişmek, herhangi bir uyarlanabilir arayüz oluşturmanın ilk adımıdır.

MediaQueryData'nın Temel Özellikleri

MediaQueryData düzinelerce özellik içerir, ancak en sık kullanılanlar düzen oluşturmayı etkileyenlerdir. Temel olanları inceleyelim.

Size — Ekran Boyutu

MediaQuery.of(context).size, cihazdan bağımsız piksel (dip) cinsinden ekran genişliği ve yüksekliğine sahip bir Size nesnesi döndürür. Bu değerler sistem kenar boşluklarını hesaba katmaz. Uyarlanabilir düzen hesaplamaları için size, birincil metriktir: mobil, tablet ve masaüstü düzenleri için kesme noktalarını belirler.

ViewPadding — Sistem Kenar Boşlukları

ViewPadding, sistemin durum çubuğu, çentik (ekran kesintisi), sistem navigasyon paneli ve ana sayfa göstergesi (iOS'ta) için ayırdığı kenar boşluklarıdır. Bu kenar boşlukları dikkate alınmazsa, içerik sistem öğelerinin altında görünebilir. MediaQuery.of(context).padding, sayfanın kök kapsayıcısına dolgu olarak uygulanması gereken bir EdgeInsets döndürür.

ViewInsets — Klavye Alanı

ViewInsets, yazılım klavyesi tarafından kapsanan ekran alanıdır. Giriş alanları için, içeriği klavyenin üzerine kaldırmak için viewInsets.bottom'u izlemek kritiktir. Flutter bunu scaffold içinde otomatik olarak halleder, ancak özel düzenler için doğrudan MediaQuery.of(context).viewInsets kullanmanız gerekir.

Orientation — Cihaz Yönü

Orientation — dikey (portrait) veya yatay (landscape) yön. Genişlik ve yükseklik karşılaştırılarak belirlenir: genişlik yükseklikten küçükse — dikey, aksi halde — yatay. Üretim kodunda yön, öğelerin dikey ve yatay düzeni arasında geçiş yapmak için kullanılır.

Özet: dört temel özellik — size, viewPadding, viewInsets ve orientation — uyarlanabilir tasarım görevlerinin %90'ını kapsar. Kalan özellikler (textScaleFactor, platformBrightness, devicePixelRatio) belirli senaryolar için kullanılır.

Uyarlanabilir Düzenler için MediaQuery Kullanımı

MediaQuery, Flutter'da uyarlanabilir tasarımın temelidir. Kesme noktalarını belirlemek, ekran boyutuna göre düzeni değiştirmek ve farklı cihazlar için kenar boşluklarını ayarlamak için kullanılır.

Tipik senaryo: bir mobil uygulamanın ürün listesini göstermesi gerekiyor. Telefonda (genişlik < 600dp) — bir sütun. Tablet (genişlik 600–900dp) — iki sütun. Masaüstünde (genişlik > 900dp) — üç sütun. MediaQuery.of(context).size.width, her form faktörü için ayrı bir ekran olmadan sütun sayısını dinamik olarak seçmeyi sağlar.

İkinci senaryo: modern cihazlarda sistem jest iç boşluklarını hesaba katmak. Dynamic Island'lı iPhone veya jest navigasyonlu Android'de, sistem kenar boşlukları ekranın bir kısmını tüketir. MediaQuery.of(context).padding, her cihaz türü için doğru değerleri döndürür ve Scaffold bunları body aracılığıyla otomatik olarak uygular. Özel widget'lar için, MediaQuery'den dolguyu açıkça iletmeniz gerekir.

Üçüncü senaryo: sistem erişilebilirlik ayarlarına uyum sağlama. MediaQuery.of(context).textScaleFactor, kullanıcının ayarlarda yazı tipi boyutunu ne kadar artırdığını gösterir. textScaleFactor > 1.3'te düzen bozulabilir — uzun metinler kart sınırlarını aşar. Uyarlanabilir düzenler bunu dikkate almalı ve gerekirse daha basit bir düzene geçmelidir.

Özet: MediaQuery yalnızca bir metrik kaynağı değil, gerçekten uyarlanabilir arayüzler oluşturmak için bir araçtır. Kesme noktaları, güvenli alan ve erişilebilirlik hususları için kullanın.

MediaQuery ile Kod Örnekleri

Örnek 1, ekran boyutunu almayı ve sütun sayısını seçmek için kesme noktaları uygulamayı gösterir.

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

Yukarıdaki örnek, ekran genişliğine göre sütun sayısını seçen bir işlevi gösterir. 600 ve 900 kesme noktaları, telefonlar, tabletler ve masaüstü için genel kabul görmüş Material Design standartlarına karşılık gelir.

Örnek 2 — sistem kenar boşluklarını dikkate alarak doğru içerik yerleşimi için viewPadding ile MediaQuery kullanımı.

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(),
  );
}

Bu örnekte, padding, sistem kenar boşluklarını kullanarak içeriği Padding içinde sarar. top, durum çubuğunu ve çentiği, left/right güvenli alanları hesaba katar. bottom dahil edilmemiştir çünkü Scaffold genellikle alt navigasyonu kendi başına halleder.

Örnek 3 — yön belirleme ve öğe düzenini değiştirme.

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

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

Dikey modda öğeler dikey olarak (Column) düzenlenir; yatay modda yatay olarak (Row). Bu yaklaşım, cihaz döndürüldüğünde alanı en iyi şekilde kullanır.

Özet: MediaQuery, uyarlanabilir düzenler oluşturmak için ana araçtır. Flutter arayüzleri geliştirirken her zaman sistem kenar boşluklarını, kesme noktalarını ve yönü dikkate alın.

MediaQuery ile Çalışırken Sık Yapılan Hatalar

Hata 1: MediaQuery.of(context)'i MediaQuery'nin ayarlanmadığı bir bağlamda çağırmak. Bir widget ağaçta MediaQuery'nin üzerindeyse, çağrı çalışma zamanı hatasına neden olur. Çözüm: MediaQuery'nin kök widget olarak ayarlandığı MaterialApp veya CupertinoApp ile sarılmış widget'ların içinde her zaman MediaQuery.of(context)'i çağırın.

Hata 2: güvenli alanı unutmak. Geliştiriciler, sistem kenar boşluklarını hesaba katmadan öğeleri konumlandırmak için MediaQuery.size kullanır. Çentik veya jest navigasyonu olan cihazlarda içerik durum çubuğunun altında kalır. Çözüm: konumlandırma koordinatlarından MediaQuery.of(context).padding'i çıkarın.

Hata 3: boyutlara katı bağlılık. Öğelerin tam boyutlarını ayarlamak için MediaQuery.of(context).size.width kullanmak (width: size.width * 0.3) yalnızca aynı form faktöründeki cihazlarda çalışır. Masaüstü veya tablette düzen doğal görünmez. Çözüm: sabit yüzdeler yerine esnek düzen için Expanded ve Flexible ile birlikte kesme noktaları kullanın.

Hata 4: textScaleFactor'ı göz ardı etmek. Kullanıcı sistem yazı tipini artırdığında arayüz bozulabilir — metinler kapsayıcı sınırlarını aşar. Çözüm: MediaQuery.of(context).textScaleFactor'ı kontrol edin ve 1.3'ün üzerindeki değerlerde kaydırmalı daha basit bir düzene geçin.

Özet: MediaQuery güçlü ama hassas bir araçtır. Arayüzün tüm cihazlarda doğru görünmesini sağlamak için sistem kenar boşluklarını, yönü ve erişilebilirlik ayarlarını dikkate alın.