Bölüm 3 — Konu 12: Text, TextStyle, Icon, Image, Asset Yönetimi

#Text — Temel Metin Widget'ı

Text(
  'Merhaba Flutter',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

Text'i zaten önceki derslerde kullanmıştık — şimdi style parametresini derinlemesine görelim.

#TextStyle — Metni Biçimlendirme

TextStyle(
  fontSize: 18,
  fontWeight: FontWeight.w600, // 100-900 arası, w400 normal, w700 bold'a yakın
  fontStyle: FontStyle.italic,
  color: Colors.black87,
  letterSpacing: 1.2,
  height: 1.5, // satır yüksekliği (line-height) çarpanı
  decoration: TextDecoration.underline,
)

FontWeight, Dart Bölüm 7'de öğrendiğimiz enum'a çok benzer bir yapıdır (aslında FontWeight, sabit FontWeight.w100...w900 değerleri barındıran özel bir class'tır — enum'un biraz daha gelişmiş bir kuzeni). TextStyle'ın kendisi, Bölüm 2 Konu 5'te öğrendiğimiz immutable (değişmez) widget mantığına uygun tasarlanmıştır — bir TextStyle nesnesi oluşturduktan sonra değiştirilemez, yeni bir stil istiyorsan yeni bir TextStyle oluşturman gerekir.

#copyWith() — Var Olan Bir Stili "Değiştirerek Kopyalama"

TextStyle temelStil = TextStyle(fontSize: 16, color: Colors.black);

TextStyle kalinStil = temelStil.copyWith(fontWeight: FontWeight.bold);
// kalinStil: fontSize 16 (korundu), color siyah (korundu), fontWeight bold (değişti)

Bölüm 1 Konu 4'te (hot reload derste) .copyWith()'i kısaca kullanmıştık — şimdi bunun neden var olduğunu tam olarak anlıyoruz. TextStyle immutable olduğu için (final alanlar), var olan bir stili "temel alıp, sadece bir-iki özelliğini değiştirmek" istediğinde, tüm özellikleri tekrar yazmak zorunda kalmamak için copyWith() kullanılır — bu, sadece belirttiğin alanları değiştirir, belirtmediklerin aynı kalır.

Bilmen faydalı bir detay: copyWith(), Flutter'ın birçok immutable class'ında (TextStyle, EdgeInsets, ve ilerleyen bölümlerde göreceğin state yönetimi sınıflarında) tekrar eden bir kalıptır — bu, Dart Bölüm 6'da öğrendiğimiz method chaining/kompozisyon felsefesinin, "değişmez nesnelerle rahat çalışma" ihtiyacına verilen bir cevaptır.

#Icon — Simgeler

Icon(
  Icons.favorite,
  color: Colors.red,
  size: 32,
)

Icons, Flutter'ın Material Design ikon setine erişim sağlayan bir class'tır (Bölüm 1 Konu 3'te pubspec.yaml'da gördüğümüz uses-material-design: true ayarı, bu ikonların kullanılabilmesini sağlıyordu). Icons.favorite, Icons.search, Icons.home gibi binlerce hazır ikon mevcuttur.

#Image — Resim Gösterme

Flutter'da resim göstermenin birkaç farklı kaynağı vardır:

Image.network('https://ornek.com/resim.png') // internetten
Image.asset('assets/images/logo.png')         // proje içinden (asset)
Image.file(File('/yol/resim.png'))             // cihaz dosya sisteminden
Image.memory(Uint8List(...))                   // bellekte tutulan byte verisinden

Image.network, Bölüm 10'da (Dart) öğrendiğimiz Future/asenkron mantığı örtük olarak kullanır — resim internetten indirilene kadar, varsayılan olarak boş görünür (bunu Bölüm 5'te, loadingBuilder ile nasıl özelleştireceğini göreceğiz).

#Asset Yönetimi — Projeye Resim Ekleme

Dart Bölüm 12 Konu 53'te pubspec.yaml'ı derinlemesine işlemiştik — şimdi assets bölümünü ekleyelim.

1. Adım — Klasör oluştur:

proje_kökü/
  assets/
    images/
      logo.png

2. Adım — pubspec.yaml'da tanımla:

flutter:
  uses-material-design: true
  assets:
    - assets/images/logo.png
    # veya tüm klasörü dahil etmek için:
    - assets/images/

3. Adım — Kodda kullan:

Image.asset('assets/images/logo.png')

Kritik nokta: pubspec.yaml'a asset ekledikten sonra, hot reload yeterli değildir — Dart Bölüm 12'de öğrendiğimiz pubspec.yaml değişikliklerinde olduğu gibi, pubspec.yaml her değiştiğinde hot restart (Bölüm 1 Konu 4'ü hatırla) veya flutter pub get + yeniden çalıştırma gerekir. Bunun nedeni, asset listesinin, uygulamanın derlenme sürecinin bir parçası olarak "paketlenmesi" gerekmesidir — bu, JIT ile anlık güncellenebilecek bir kod değişikliği değil, yapılandırma değişikliğidir.

#Farklı Ekran Yoğunlukları İçin Asset'ler (Retina/HiDPI Desteği)

assets/
  images/
    logo.png       # 1x (temel çözünürlük)
    2.0x/
      logo.png     # 2x çözünürlük (yüksek DPI ekranlar için)
    3.0x/
      logo.png     # 3x çözünürlük

Flutter, cihazın ekran yoğunluğuna göre otomatik olarak doğru çözünürlükteki resmi seçer — sen kodda hep Image.asset('assets/images/logo.png') yazarsın, Flutter arka planda cihaza uygun olanı bulur. Bu, mobil geliştirmede yaygın bir kalıptır (web'deki srcset mantığına benzer).

#AssetImage vs Image.asset — İnce Bir Fark

Image.asset('assets/images/logo.png') // widget - doğrudan ekranda görünür

// AssetImage - bir "resim kaynağı" tanımı, kendisi widget DEĞİL
CircleAvatar(
  backgroundImage: AssetImage('assets/images/logo.png'),
)

Image.asset(...), aslında arka planda Image(image: AssetImage(...)) şeklinde çalışır — yani Image.asset, kolaylık sağlayan bir kısayol constructor'dır (Dart Bölüm 6 Konu 27'de öğrendiğimiz named constructor kavramının, Flutter'ın kendi kütüphanesindeki bir örneği!). AssetImage, bazı widget'ların (örneğin CircleAvatar, DecorationImage) Image widget'ı değil, resim kaynağı beklediği durumlarda kullanılır.

#Hepsini Bir Arada — Profil Kartı Örneği

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 30,
          backgroundImage: AssetImage('assets/images/profil.png'),
        ),
        SizedBox(width: 12),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Ahmet Yılmaz',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            Row(
              children: [
                Icon(Icons.star, color: Colors.amber, size: 16),
                Text(' 4.8'),
              ],
            ),
          ],
        ),
      ],
    );
  }
}

#🎯 Bu Dersten Çıkarılması Gerekenler

• TextStyle, immutable bir stil tanımıdır; .copyWith(), var olan bir stili temel alıp belirli alanları değiştirerek yeni bir stil oluşturur.
• Icon, Icons class'ı üzerinden Material Design ikonlarına erişim sağlar.
• Image.network/asset/file/memory, farklı kaynaklardan resim göstermenin yollarıdır.
• Asset'ler pubspec.yaml'da tanımlanmalı ve değişikliklerden sonra hot restart (veya yeniden çalıştırma) gerekir.
• Image.asset, aslında Image(image: AssetImage(...))'in kısayoludur — Flutter'ın kendi kütüphanesinde named constructor kullanımına bir örnek.

#📝 Ödevler

• [ ] Farklı TextStyle özellikleriyle (fontSize, fontWeight, color, letterSpacing) bir metin oluştur.
• [ ] copyWith() kullanarak, temel bir stili temel alıp sadece rengini değiştiren yeni bir stil oluştur.
• [ ] Projene bir resim ekle (assets klasörüne), pubspec.yaml'da tanımla, Image.asset ile göster.
• [ ] Image.network ile internetten bir resim göster.
• [ ] Konu 12'deki "ProfilKarti" örneğine benzer, kendi tasarladığın bir profil widget'ı yaz (CircleAvatar + isim + ikon içersin).

Sıradaki konu: Bölüm 3 — Konu 13: Custom Widget Yazma Prensipleri (Composition Over Inheritance)