# 3. Hafta — Metin, Simge ve Görsel

## Bu hafta ne yapacağız?

Bir öğrenci profilini sıfırdan geliştireceğiz. `Text` ile bilgi gösterecek, `Icon` ile anlamı güçlendirecek, profil görselini `CircleAvatar` içinde sunacağız. “Takip et” düğmesine basıldığında simge, yazı ve takipçi sayısı birlikte değişecek.

## Kazanımlar

- Metni boyut, kalınlık ve renk ile biçimlendirme
- Material simgelerini doğru bağlamda kullanma
- Görsel alanını daire biçiminde ve taşma oluşturmadan yerleştirme
- Bir kullanıcı eyleminden sonra birden fazla ekran öğesini güncelleme
- Aynı tür etiketleri `Wrap` ile dar ekrana uyarlama

## Uygulama 03 — Profil Kartı

### 1. Veriyi tanımlama

Takip durumu değişeceği için sayfamız `StatefulWidget` olur. Ekranın iki durumu vardır:

```dart
bool takipEdiliyor = false;
int takipci = 128;
```

### 2. Görsel alanını oluşturma

`CircleAvatar`, profil görselini dairesel bir alana yerleştirir. Bu örnekte haricî bir resme bağlı kalmamak için öğrenci simgesi kullanıyoruz:

```dart
const CircleAvatar(
  radius: 52,
  backgroundColor: Color(0xffeaddff),
  child: Icon(Icons.person, size: 64, color: Color(0xff6750a4)),
)
```

Gerçek bir fotoğraf kullanılacaksa `child` yerine `backgroundImage: AssetImage('assets/profil.jpg')` yazılır ve dosya `pubspec.yaml` içinde tanıtılır.

### 3. Metinlerde görsel hiyerarşi kurma

İsim en önemli bilgidir; sınıf ve alan bilgisi daha küçük ve soluk gösterilir:

```dart
const Text(
  'Ece Yılmaz',
  style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
),
const Text(
  '11/B • Mobil Uygulama Öğrencisi',
  style: TextStyle(color: Color(0xff625b71)),
)
```

### 4. İlgi alanlarını yerleştirme

`Row`, sığmayan etiketlerde taşma oluşturabilir. `Wrap` ise gerektiğinde yeni satıra geçer:

```dart
const Wrap(
  spacing: 8,
  children: [
    Chip(label: Text('Flutter')),
    Chip(label: Text('Tasarım')),
    Chip(label: Text('Robotik')),
  ],
)
```

### 5. Takip davranışını kodlama

Tek bir işlem hem sayıyı hem düğmenin metin ve simgesini günceller:

```dart
void takibiDegistir() {
  setState(() {
    takipEdiliyor = !takipEdiliyor;
    takipci += takipEdiliyor ? 1 : -1;
  });
}
```

Düğmede `takipEdiliyor` değerine göre `person_add_alt_1` veya `check` simgesi gösterilir. Uygulama testinde düğmeye basıldı; takipçi sayısının 128’den 129’a, metnin de “Takip ediliyor” durumuna geçtiği doğrulandı.

![Takip işlemi uygulanmış Profil Kartı](../../screenshots/week-03-adapted.png)

## Özgün proje — Okul Duyuru Panosu

Şimdi aynı `Text` ve `Icon` bilgisini gerçek bir okul ihtiyacında kullanalım. Uygulama üç duyuruyu listeler; öğrenci “Önemli” filtresini seçtiğinde yalnız teslim tarihi kritik olan duyuru kalır.

### Duyuru modeli

```dart
class Duyuru {
  const Duyuru(this.baslik, this.detay, this.simge, {this.onemli = false});
  final String baslik;
  final String detay;
  final IconData simge;
  final bool onemli;
}
```

### Filtreleme işlemi

```dart
final gorunenler = duyurular
    .where((duyuru) => !sadeceOnemli || duyuru.onemli)
    .toList();
```

`SegmentedButton`, seçilen filtreyi değiştirir; `ListView.separated` filtre sonucunu yeniden çizer. Kırmızı nokta yalnız önemli kayıtta görünür. Testte “Önemli” seçildi ve diğer iki duyurunun ekrandan kalktığı doğrulandı.

![Önemli filtresi uygulanmış Okul Duyuru Panosu](../../screenshots/week-03-original.png)

## Sıra sende

1. Kolay: Profil kartındaki isim, alan ve ilgi etiketlerini kendine göre değiştir.
2. Orta: Duyurulara “Kulüp”, “Sınav” ve “Teslim” kategorileri ekleyip farklı simgeler kullan.
3. İleri: Okunmuş duyuruyu işaretle; okunmamış duyuru sayısını başlıkta göster.

Çözümünü gönderdikten ve geri bildirim aldıktan sonra Duyuru Panosu’nun gerçek `lib/main.dart` kodu ile çalışan proje indirme bağlantısı açılacaktır. İpucu yalnız yön gösterecek; örnek çözüm düğmesi ise eksiksiz kodu gösterecektir.

## Kontrol listesi

- Metinler aynı büyüklükte değil; önem sırasına göre biçimlendirildi.
- Simgeler yalnız süs olarak değil, içeriğin anlamını desteklemek için kullanıldı.
- Takip ve filtre düğmeleri gerçekten ekran durumunu değiştiriyor.
- Dar ekranda etiketler taşmıyor.
- Her iki uygulama Flutter widget testiyle çalıştırıldı ve gerçek render çıktısı alındı.
