# 13. Hafta — Esnek ve Uyumlu Tasarım

## Bu hafta ne yapacağız?

Telefon, tablet ve geniş ekranda sütun sayısını otomatik değiştiren bir anı galerisi geliştireceğiz. `LayoutBuilder`, `Expanded`, kaydırılabilir filtreler ve `SliverGrid` ile sabit piksel düzenlerinden kaçınacağız. Ardından dar ekranda üstten, geniş ekranda soldan filtrelenen sınıf panosu yapacağız.

## Kazanımlar

- Kullanılabilir genişliği `LayoutBuilder` ile ölçme
- Ekran aralıklarına göre farklı sütun ve yerleşim seçme
- `Expanded`, `Wrap` ve yatay kaydırmayla taşmayı önleme
- Grid ile liste görünümü arasında uygun seçim yapma
- Aynı veri ve davranışı farklı ekran düzenlerinde koruma

## Uygulama 13 — Duyarlı Galeri

### 1. Ekranı değil kullanılabilir alanı ölçme

```dart
LayoutBuilder(
  builder: (context, sinirlar) {
    final genislik = sinirlar.maxWidth;
    // Düzen bu alana göre kurulur.
  },
)
```

Bir widget bütün ekranı kaplamayabilir. `LayoutBuilder`, ebeveynin gerçekten verdiği alanı ölçer.

### 2. Sütun sayısını belirleme

```dart
final sutun = sinirlar.maxWidth >= 900
    ? 4
    : sinirlar.maxWidth >= 600
        ? 3
        : 2;
```

Dar telefon iki, tablet üç, geniş ekran dört sütun kullanır.

### 3. Grid oluşturma

```dart
SliverGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: sutun,
    mainAxisSpacing: 12,
    crossAxisSpacing: 12,
    childAspectRatio: .85,
  ),
  delegate: SliverChildBuilderDelegate(
    (context, index) => GaleriKarti(gorunenler[index]),
    childCount: gorunenler.length,
  ),
)
```

Filtre çipleri yatay `SingleChildScrollView` içinde olduğu için küçük ekranda taşmaz. Test 430 piksel genişlikte çalıştırıldı; iki sütun doğrulandı. Doğa filtresinden sonra yalnız iki doğa kartı kaldı.

![Dar ekranda iki sütunlu Doğa galerisi](../../screenshots/week-13-adapted.png)

## Özgün proje — Sınıf Panosu

Pano aynı duyuru listesini iki farklı yerleşimde sunar:

```dart
final genis = sinirlar.maxWidth >= 700;
```

Dar ekranda filtreler listenin üstündedir:

```dart
Column(children: [filtreler, Expanded(child: liste)])
```

Geniş ekranda filtreler solda sabit genişlikte görünür:

```dart
Row(children: [
  SizedBox(width: 220, child: filtreler),
  Expanded(child: liste),
])
```

Veri, filtreleme mantığı ve kartlar değişmez; yalnız yerleşim değişir. Testte dar ekranda Sınav filtresi seçildi ve yalnız “Veritabanı sınavı” duyurusunun kaldığı doğrulandı.

![Dar ekranda Sınav filtresi uygulanmış Sınıf Panosu](../../screenshots/week-13-original.png)

## Sıra sende

1. Kolay: Galeriye “Sanat” kategorisi ve iki yeni kart ekle.
2. Orta: Sınıf panosunda geniş ekrana iki sütunlu duyuru grid’i ekle.
3. İleri: Ekran genişliği, yazı büyütme ayarı ve yatay/dikey yönü birlikte dikkate alan erişilebilir kırılım kuralları oluştur.

Çözümünü gönderdikten ve geri bildirim aldıktan sonra Sınıf Panosu’nun gerçek Dart kodu ile çalışan proje paketi açılacaktır. İpucu uygun kırılım noktasını belirlemene yardım edecek; çözüm düğmesi eksiksiz `lib/main.dart` kodunu gösterecektir.

## Kontrol listesi

- Düzen cihaz adına değil kullanılabilir genişliğe göre değişiyor.
- Dar ekranda filtreler ve kartlar taşmıyor.
- Sütun sayısı değişse de veri ve etkileşim korunuyor.
- Boş alanlar `Expanded` ile kontrollü paylaştırılıyor.
- İki proje Flutter widget testinden geçti ve gerçek ekran çıktıları görsel olarak doğrulandı.
