# 4. Hafta — Satır, Sütun ve Boşluk

## Bu hafta ne yapacağız?

Bir okul mağazası için çalışan ürün kartı geliştireceğiz. `Column` ile bölümleri alt alta, `Row` ile fiyat ve adet seçiciyi yan yana yerleştireceğiz. `Padding` dış boşluğu, `SizedBox` öğeler arasındaki ritmi düzenleyecek. Adet arttığında toplam fiyat gerçekten hesaplanacak.

## Kazanımlar

- `Row` ve `Column` eksenlerini ayırt etme
- `mainAxisAlignment` ve `crossAxisAlignment` ile hizalama
- `Padding`, `SizedBox` ve `Expanded` ile dengeli, taşmayan düzen kurma
- Arayüz durumunu hesaplanan bir değerle birlikte güncelleme
- Tekrarlanan kart yapısını liste içinde kullanma

## Uygulama 04 — Ürün Kartı

### 1. Dikey iskeleti kurma

Ürün görseli ve bilgiler alt alta yerleştirilir. Kartın kenarlarından taşmaması için kırpma açılır:

```dart
Card(
  clipBehavior: Clip.antiAlias,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [urunGorseli, urunBilgileri],
  ),
)
```

### 2. İç boşluk ve aralık kullanma

`Padding` bir bölümün dört tarafındaki alanı, `SizedBox` iki öğe arasındaki belirli uzaklığı oluşturur:

```dart
Padding(
  padding: const EdgeInsets.all(22),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const Text('Günlük Okul Çantası'),
      const SizedBox(height: 8),
      const Text('Su geçirmez kumaş • 3 bölmeli'),
    ],
  ),
)
```

### 3. Fiyat ve adet seçiciyi yan yana getirme

```dart
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text('₺${(fiyat * adet).toStringAsFixed(2)}'),
    Row(children: [azaltDugmesi, Text('$adet'), artirDugmesi]),
  ],
)
```

`spaceBetween`, satırın ilk öğesini sola, son öğesini sağa iter. İçteki ikinci `Row`, eksi, sayı ve artı düğmelerini tek grup yapar.

### 4. Çalışan alışveriş davranışı

```dart
IconButton(
  onPressed: () => setState(() => adet++),
  icon: const Icon(Icons.add),
)
```

Eksi düğmesi adet 1 olduğunda devre dışı kalır. “Sepete ekle” düğmesi seçilen adedi `SnackBar` ile bildirir. Test sırasında adet 2 yapıldı, toplamın `₺259.80` olduğu ve “2 ürün sepete eklendi” mesajının göründüğü doğrulandı.

![Adedi iki yapılmış ve sepete eklenmiş Ürün Kartı](../../screenshots/week-04-adapted.png)

## Özgün proje — Ders Programı Kartı

Öğrenci seçtiği güne ait dersleri, saatleri ve derslikleri tek bakışta görecek. Üstteki günler bir `Row`, her ders kartındaki saat ve açıklama da başka bir `Row` kullanır.

### Gün seçimi

```dart
ChoiceChip(
  label: Text(gunler[index]),
  selected: gun == index,
  onSelected: (_) => setState(() => gun = index),
)
```

Üç `ChoiceChip`, `Expanded` içine alınarak satır genişliği dengeli paylaşılır.

### Ders satırı

```dart
Row(
  children: [
    saatKutusu,
    const SizedBox(width: 16),
    Expanded(child: dersVeDerslikBilgisi),
  ],
)
```

`Expanded`, uzun ders veya derslik adlarının kalan alanı kullanmasını sağlar. Uygulama testinde Çarşamba seçildi; Matematik kaybolurken Veritabanı dersinin geldiği doğrulandı.

![Çarşamba programını gösteren Ders Programı Kartı](../../screenshots/week-04-original.png)

## Sıra sende

1. Kolay: Kendi haftalık programını üç gün için düzenle.
2. Orta: Her ders alanına göre farklı renk ve simge göster.
3. İleri: O an devam eden derse “Şimdi” etiketi ekle ve gün sonunda “Dersler tamamlandı” mesajı göster.

Çözümünü gönderdikten ve geri bildirim aldıktan sonra özgün projenin gerçek `lib/main.dart` kodu ve çalıştırılabilir proje paketi açılacaktır. İpucu ile örnek çözüm birbirinden farklı içerik gösterecektir.

## Kontrol listesi

- `Row` yalnız yatay, `Column` yalnız dikey gruplama gereken yerde kullanıldı.
- Boşluklar rastgele değil, tutarlı `Padding` ve `SizedBox` değerleriyle verildi.
- Uzun içeriğin taşmaması için uygun yerde `Expanded` kullanıldı.
- Adet ve gün düğmeleri ekrandaki sonucu gerçekten değiştiriyor.
- İki proje Flutter widget testiyle çalıştırıldı ve gerçek render çıktıları görsel olarak doğrulandı.
