# 10. Hafta — Butonlar ve Olaylar

## Bu hafta ne yapacağız?

Üç tema düğmesinden seçilen renge göre ekranı değiştiren bir “Renk Stüdyosu” geliştireceğiz. Seçim olayını ayrı metoda taşıyacak ve önceki renge dönme davranışı ekleyeceğiz. Ardından günlük alışkanlıkları tek tek veya topluca tamamlayan özgün bir uygulama yapacağız.

## Kazanımlar

- `FilledButton`, `OutlinedButton`, `IconButton` ve `CheckboxListTile` kullanım amaçlarını ayırt etme
- `onPressed` ve `onChanged` callback’lerine işlev bağlama
- Olay işleme kodunu okunabilir metotlara ayırma
- Bir olayla birden fazla durum değerini güncelleme
- Devre dışı ve tamamlanmış durumları görsel olarak anlatma

## Uygulama 10 — Renk Stüdyosu

### 1. Renk verisini modelleme

```dart
class RenkSecimi {
  const RenkSecimi(this.ad, this.renk, this.simge);
  final String ad;
  final Color renk;
  final IconData simge;
}
```

Her seçeneğin adı, rengi ve simgesi tek nesnede tutulur. Böylece paralel üç liste kullanmaya gerek kalmaz.

### 2. Düğme olayını metoda bağlama

```dart
void renkSec(int index) {
  setState(() {
    onceki = secili;
    secili = index;
  });
}
```

Buton yalnız hangi seçeneğin seçildiğini metoda iletir:

```dart
FilledButton.tonalIcon(
  onPressed: () => renkSec(index),
  icon: Icon(renkler[index].simge),
  label: Text(renkler[index].ad),
)
```

### 3. Geri alma olayı

```dart
void geriAl() {
  setState(() {
    final gecici = secili;
    secili = onceki;
    onceki = gecici;
  });
}
```

`OutlinedButton`, birincil seçimlerden daha düşük önem taşıyan geri alma işlemi için kullanılır. Testte Gün batımı seçildi, geri alındığında Deniz geldi, sonra Orman seçildi.

![Orman temasının seçildiği Renk Stüdyosu](../../screenshots/week-10-adapted.png)

## Özgün proje — Alışkanlık İşaretleyici

Her alışkanlığın adı, simgesi ve tamamlanma durumu vardır:

```dart
class Aliskanlik {
  Aliskanlik(this.ad, this.simge, {this.tamam = false});
  final String ad;
  final IconData simge;
  bool tamam;
}
```

### Tek alışkanlığın olayı

```dart
CheckboxListTile(
  value: aliskanlik.tamam,
  onChanged: (deger) {
    setState(() => aliskanlik.tamam = deger ?? false);
  },
)
```

Tamamlanan öğenin kart rengi ve metin çizgisi de değişir. Özet, her çizimde listedeki doğru değerlerden hesaplanır:

```dart
final tamamlanan = aliskanliklar.where((a) => a.tamam).length;
final oran = tamamlanan / aliskanliklar.length;
```

### Toplu olay

```dart
onPressed: () {
  setState(() {
    for (final aliskanlik in aliskanliklar) {
      aliskanlik.tamam = true;
    }
  });
}
```

Tek düğme dört model nesnesini günceller; liste, ilerleme çubuğu ve kutlama mesajı birlikte yenilenir. Testte “Tümünü tamamla” çalıştırıldı ve `4 / 4` sonucu doğrulandı.

![Tüm günlük görevleri tamamlanan Alışkanlık İşaretleyici](../../screenshots/week-10-original.png)

## Sıra sende

1. Kolay: Renk Stüdyosu’na “Gece” teması ekle.
2. Orta: Alışkanlıklara “Tüm işaretleri kaldır” düğmesi ekle.
3. İleri: Son üç renk seçimini geçmişte tutup birden çok geri alma işlemi sağlayan yığın yapısı kur.

Çözümünü gönderdikten ve geri bildirim aldıktan sonra Alışkanlık İşaretleyici’nin gerçek Dart kodu ve çalışan proje paketi açılacaktır. İpucu callback’in hangi veriyi değiştireceğini bulduracak; çözüm düğmesi eksiksiz `lib/main.dart` kodunu gösterecektir.

## Kontrol listesi

- Her işlem önemine uygun buton türünü kullanıyor.
- Uzun olay kodları doğrudan widget içinde bırakılmadı.
- Geri alma gerçekten önceki durumu geri getiriyor.
- Toplu olay bütün modelleri ve özet görünümünü güncelliyor.
- İki proje Flutter widget testinden geçti ve gerçek ekran çıktıları görsel olarak doğrulandı.
