Bölüm 4 — Konu 17: Responsive & Adaptive Tasarım (MediaQuery, LayoutBuilder, OrientationBuilder, Breakpoint Stratejileri)

Bölüm 4'ün son konusundayız. Flutter uygulamaları, telefon, tablet, masaüstü, web gibi çok farklı ekran boyutlarında çalışabilir — bu derste, arayüzünü bu farklılıklara uyarlamayı öğreneceğiz.

#MediaQuery — Cihaz/Ekran Hakkında Bilgi Alma

Widget build(BuildContext context) {
  final ekranBoyutu = MediaQuery.of(context).size;
  final genislik = ekranBoyutu.width;
  final yukseklik = ekranBoyutu.height;

  return Text('Ekran: ${genislik.toInt()} x ${yukseklik.toInt()}');
}

MediaQuery.of(context), Bölüm 4 Konu 16'da öğrendiğimiz Theme.of(context) ile aynı mekanizmayı kullanır — widget ağacında en yakın MediaQueryData'yı bulur (bu da bir InheritedWidget'a dayanır, Bölüm 8'de tam göreceğiz). MediaQuery, ekran boyutu dışında da birçok bilgi sağlar:

MediaQuery.of(context).size.width          // ekran genişliği
MediaQuery.of(context).orientation         // yatay/dikey (Orientation.portrait/landscape)
MediaQuery.of(context).padding.top         // üstteki "çentik"/durum çubuğu boşluğu
MediaQuery.textScalerOf(context)           // kullanıcının sistem yazı boyutu ayarı

Not: Eskiden (Flutter 3.12 öncesi) bu son satır için MediaQuery.of(context).textScaleFactor (bir double) kullanılırdı. Bu artık deprecated — çünkü tek bir çarpanla ölçeklendirme, erişilebilirlik açısından her yazı boyutu için doğru sonuç vermiyordu. Güncel API TextScaler nesnesi döndürür ve bir font boyutunu ölçeklendirmek için MediaQuery.textScalerOf(context).scale(16) gibi kullanılır (16, ölçeklenecek orijinal font boyutu).

#Basit Bir Breakpoint Stratejisi

Breakpoint, "bu genişlikten sonra düzeni değiştir" kararının alındığı eşik değerdir. Web geliştirmede yaygın olan bu kavram, Flutter'da da uygulanabilir:

class ResponsiveEkran extends StatelessWidget {
  const ResponsiveEkran({super.key});

  @override
  Widget build(BuildContext context) {
    final genislik = MediaQuery.of(context).size.width;

    if (genislik < 600) {
      return TekSutunGorunum(); // telefon
    } else if (genislik < 1024) {
      return IkiSutunGorunum(); // tablet
    } else {
      return UcSutunGorunum(); // masaüstü/geniş ekran
    }
  }
}

Bu, Dart Bölüm 3'te öğrendiğimiz if/else if yapısının (ya da bir switch expression'ın — Dart Bölüm 3 Konu 12'yi hatırla) doğrudan bir uygulaması — ekran genişliğine göre farklı widget ağaçları döndürüyoruz.

#LayoutBuilder — Ebeveynin Boyutuna Göre Karar Verme

MediaQuery, tüm ekranın boyutunu verir. Ama bazen, sadece belirli bir widget'ın kendisine ayrılan alanın boyutuna göre karar vermen gerekir (örneğin bir widget, ekranın yarısını kaplıyorsa, "ekran genişliği" değil, "kendisine ayrılan alan" önemlidir):

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth < 300) {
      return Icon(Icons.star); // dar alan — sadece ikon
    } else {
      return Row(
        children: [Icon(Icons.star), Text('Favorilerim')],
      );
    }
  },
)

BoxConstraints constraints — Bölüm 2 Konu 8'de öğrendiğimiz constraint sistemini hatırlıyor musun? "Constraints go down" demiştik — işte LayoutBuilder, bu kısıtlamayı doğrudan sana verir! constraints.maxWidth, "bu widget'a ebeveyninden gelen maksimum genişlik kısıtlaması nedir" sorusunun cevabıdır. Bu, Bölüm 3 Konu 11'de öğrendiğimiz builder pattern'in (context ve bir parametre alan anonim fonksiyon) bir başka uygulaması — burada index yerine constraints alıyoruz.

MediaQuery ile LayoutBuilder arasındaki fark:

#OrientationBuilder — Yön Değişikliklerine Tepki Verme

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      crossAxisCount: orientation == Orientation.portrait ? 2 : 4,
      children: List.generate(8, (i) => Container(color: Colors.blue[100 * (i % 8 + 1)])),
    );
  },
)

OrientationBuilder, cihaz dikey (portrait) mi yatay (landscape) mi tutulduğuna göre farklı bir yapı kurmanı sağlar — burada, dikey modda 2 sütun, yatay modda 4 sütunlu bir GridView (Bölüm 3 Konu 11'i hatırla) oluşturuyoruz.

#Responsive vs Adaptive — Terminoloji Farkı

Bu iki terim sık karıştırılır:

• Responsive (duyarlı) tasarım: Aynı widget ağacı, akıcı (fluid) bir şekilde farklı boyutlara uyum sağlar (Expanded/Flexible ile oranlar otomatik ayarlanır — Bölüm 2 Konu 9'u hatırla).
• Adaptive (uyarlanabilir) tasarım: Farklı ekran boyutları için tamamen farklı widget ağaçları/düzenler kullanılır (yukarıdaki ResponsiveEkran örneğindeki gibi — telefon için ayrı, tablet için ayrı bir widget).

Gerçek uygulamalarda, genelde ikisi birlikte kullanılır: büyük yapısal kararlar (kaç sütun, hangi navigasyon deseni) adaptive; her boyut içindeki ince ayarlar (Expanded oranları) responsive olur.

#Pratik Bir Örnek — İkisini Birleştirmek

class UrunEkrani extends StatelessWidget {
  const UrunEkrani({super.key});

  @override
  Widget build(BuildContext context) {
    final genislik = MediaQuery.of(context).size.width;
    final genisEkranMi = genislik >= 600; // ADAPTIVE karar

    return Scaffold(
      body: Row(
        children: [
          Expanded(
            flex: genisEkranMi ? 2 : 1, // RESPONSIVE oran
            child: UrunListesi(),
          ),
          if (genisEkranMi) // sadece geniş ekranda göster — ADAPTIVE
            Expanded(
              flex: 3,
              child: UrunDetayPaneli(),
            ),
        ],
      ),
    );
  }
}

Burada, Dart Bölüm 4 Konu 20'de öğrendiğimiz collection if kalıbı (if (genisEkranMi) Expanded(...)) — dar ekranda UrunDetayPaneli hiç oluşturulmuyor (telefon kullanıcısı, muhtemelen bir sonraki ekranda detayı görür), geniş ekranda ise yan yana iki panel gösteriliyor. Bu, tablet/masaüstü uygulamalarında (özellikle "master-detail" — liste + detay yan yana deseni) çok yaygın bir kalıptır.

#MediaQuery Performans Notu — Kısa Bir Önizleme

Bölüm 9'da (performans) derinlemesine işleyeceğiz, ama şimdiden bilmen faydalı: MediaQuery.of(context) çağırdığında, o widget, ekran boyutu her değiştiğinde (örneğin cihaz döndürüldüğünde) otomatik olarak yeniden oluşturulur (rebuild) — çünkü InheritedWidget mekanizması, "bu veriye bağımlı olan her widget'ı, veri değiştiğinde güncelle" prensibiyle çalışır (Bölüm 8'de tam işleyeceğiz). Bu, genelde istediğin davranıştır (ekran boyutu değiştiğinde arayüzün güncellenmesini istersin), ama gereksiz yere geniş kapsamda MediaQuery kullanmak, performans açısından dikkat gerektirebilir.

#🎯 Bu Dersten Çıkarılması Gerekenler

• MediaQuery.of(context), tüm ekranın boyutu, yönü ve diğer cihaz bilgilerine erişim sağlar.
• LayoutBuilder, widget'a ebeveyninden gelen kısıtlamayı (BoxConstraints) doğrudan verir — Bölüm 2'de öğrendiğimiz constraint sisteminin canlı bir uygulaması.
• OrientationBuilder, cihazın dikey/yatay durumuna göre farklı düzen kurmayı sağlar.
• Responsive tasarım (akıcı oranlar) ile adaptive tasarım (tamamen farklı yapılar), genelde birlikte kullanılır.
• Breakpoint stratejisi, genişliğe göre if/else if ile farklı widget ağaçları seçmenin temel yoludur.

#📝 Ödevler

• [ ] MediaQuery ile ekran genişliğini al, 600px altında/üstünde farklı bir mesaj gösteren basit bir widget yaz.
• [ ] LayoutBuilder kullanarak, ekran genişliği 600px altındaysa tek sütun, üstündeyse iki sütun gösteren bir grid yapısı kur.
• [ ] OrientationBuilder ile, dikey/yatay moda göre farklı sayıda sütunlu bir GridView oluştur (bir emulator'de döndürerek test et).
• [ ] Konu 17'deki "UrunEkrani" örneğine benzer, dar ekranda tek panel, geniş ekranda iki panel gösteren (collection if kullanarak) bir master-detail düzeni yap.
• [ ] Kendi cümlelerinle, "responsive" ile "adaptive" tasarım arasındaki farkı, kendi örneklerinle açıkla.

#🎮 Mini Uygulama — Uyarlanabilir Ürün Kataloğu

Bölüm 4'te öğrendiğin form, tema ve responsive tasarım konularını birleştiren bir mini proje:

Gereksinimler:

• ThemeData ile özel bir tema tanımla (renk, buton stili).
• MediaQuery/LayoutBuilder ile, dar ekranda 2 sütunlu, geniş ekranda 4 sütunlu bir ürün ızgarası (GridView.builder, Bölüm 3 Konu 11'i hatırla) göster.
• Her ürün kartına tıklanınca (Bölüm 3 Konu 14'ü hatırla — Navigator.push), bir "ürün detay" ekranına geç.
• Detay ekranında, Form + TextFormField ile basit bir "yorum yaz" formu ekle (validasyonlu — boş yorum gönderilemesin).
• AppBar'da bir karanlık mod switch'i ekle (Bölüm 4 Konu 16'yı hatırla).

Bu proje, Bölüm 2, 3 ve 4'ün tamamını kapsayan, gerçekçi bir uygulama parçasıdır.

#🏁 Bölüm 4 Tamamlandı!

Form yönetimini, validasyonu, tema sistemini ve responsive/adaptive tasarımı öğrendin. Artık kullanıcıdan veri alabilen, tutarlı stillere sahip ve farklı ekran boyutlarına uyum sağlayan uygulamalar yazabiliyorsun.

Sıradaki durak Bölüm 5 — Asenkron Dünya & Veri: FutureBuilder, StreamBuilder, HTTP istekleri ve JSON serialization ile, uygulamanı gerçek bir API'ye bağlayacaksın — Dart Bölüm 10'da öğrendiğin Future/Stream bilgisinin Flutter'daki tam karşılığını göreceksin.