Bölüm 4 — Konu 16: Theme Sistemi (ThemeData, ColorScheme)

#Neden Tema Sistemi Var?

Şimdiye kadar, her widget'a renk/font/stil tek tek verdik (TextStyle(color: Colors.blue) gibi). Bu, küçük örnekler için sorun değil, ama gerçek bir uygulamada tutarlılığı korumak çok zorlaşır — 50 farklı ekranda "ana renk"i değiştirmek istediğinde, hepsini tek tek bulup değiştirmen gerekir. Tema sistemi, bunu merkezi bir yerden yönetmeni sağlar.

#ThemeData — Uygulama Genelinde Stil Tanımlama

Bölüm 3 Konu 10'da MaterialApp'in theme: parametresini kısaca görmüştük — şimdi derinlemesine işleyelim:

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.indigo,
    scaffoldBackgroundColor: Colors.grey[100],
    textTheme: TextTheme(
      headlineMedium: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
      bodyMedium: TextStyle(fontSize: 16),
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.indigo,
        foregroundColor: Colors.white,
      ),
    ),
  ),
  home: AnaEkran(),
)

ThemeData, Dart Bölüm 6'da öğrendiğimiz class'lar ve named parametreler kullanılarak tasarlanmış, devasa bir yapılandırma nesnesidir — düzinelerce widget türü için (butonlar, metin alanları, kartlar, vb.) varsayılan stiller tanımlamanı sağlar.

#Theme.of(context) — Temaya Erişim

Bölüm 1 Konu 4'te (hot reload deneyinde) Theme.of(context).textTheme.headlineMedium kullanmıştık — şimdi bunun nasıl çalıştığını anlayalım:

Text(
  'Başlık',
  style: Theme.of(context).textTheme.headlineMedium,
)

Theme.of(context) ne yapıyor? Bu, Bölüm 2 Konu 5'te "context'i şimdilik bir bilgi taşıyıcı olarak düşün" dediğimiz noktanın gerçek gücünü gösteriyor. BuildContext, widget'ın ağaçtaki konumunu bildiği için, Theme.of(context), "bu widget'ın en yakın üst ebeveyninde tanımlı olan ThemeData'yı bul" işlemini yapar. Bu, Dart Bölüm 7'de öğrendiğimiz kalıtım zincirini andıran, ama widget ağacı üzerinde çalışan bir mekanizma — "en yakın atadaki ayarı devral" mantığı.

Neden bu şekilde tasarlandı, neden global bir değişken kullanılmadı? Bölüm 8'de (Flutter müfredatı, InheritedWidget konusunda) bunun tam mekanizmasını göreceğiz — ama şimdiden bil ki, Theme.of(context)'in kendisi de bir InheritedWidget kullanır. Bu, "widget ağacı boyunca veri paylaşmanın" Flutter'daki temel yöntemidir.

#ColorScheme — Modern Renk Yönetimi

Material Design 3 ile birlikte, tek tek renkler (primaryColor gibi) yerine, bütünsel bir renk sistemi olan ColorScheme öne çıktı:

ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.deepPurple,
  ),
)

ColorScheme.fromSeed() — bu, tek bir "tohum" (seed) renkten, Material Design'ın renk teorisi kurallarına göre, uyumlu bir renk paleti (birincil, ikincil, arka plan, hata rengi gibi düzinelerce renk) otomatik olarak üretir. Bu, elle her rengi tek tek tanımlamak yerine, tek bir karar (ana renk) ile tutarlı bir tasarım sistemi elde etmeni sağlar.

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    'Merhaba',
    style: TextStyle(color: Theme.of(context).colorScheme.onPrimary),
  ),
)

primary ve onPrimary ayrımı önemli: primary, ana rengi; onPrimary, o rengin üzerine yazılacak metnin rengini belirtir (genelde kontrast için beyaz/siyah). Bu isimlendirme kalıbı (on öneki), ColorScheme'in her rengi için geçerlidir (secondary/onSecondary, error/onError gibi) — Dart Bölüm 1'de öğrendiğimiz tutarlı isimlendirme prensibinin, Flutter'ın kendi API tasarımında uygulanmış hali.

#Karanlık Mod (Dark Mode) Desteği

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.light),
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.dark),
  ),
  themeMode: ThemeMode.system, // sistem ayarına göre otomatik seç
  home: AnaEkran(),
)

themeMode: ThemeMode.system, Dart Bölüm 7'de öğrendiğimiz enum'a benzer bir yapı kullanır (ThemeMode, system/light/dark değerlerine sahip bir enum) — cihazın sistem ayarına (kullanıcının telefonunda karanlık mod açık mı) göre, Flutter otomatik olarak theme veya darkTheme'i seçer.

#Elle Tema Değiştirme — StatefulWidget ile

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeMode _temaModu = ThemeMode.system;

  void _temaDegistir(bool karanlikMi) {
    setState(() {
      _temaModu = karanlikMi ? ThemeMode.dark : ThemeMode.light;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue)),
      darkTheme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.dark)),
      themeMode: _temaModu,
      home: AnaEkran(onTemaDegistir: _temaDegistir),
    );
  }
}

Bu, Bölüm 2 Konu 6'da öğrendiğimiz setState() mekanizmasını, tema bağlamında kullanıyor — _temaModu değiştiğinde, setState() tetikleniyor ve MaterialApp (ve altındaki tüm widget ağacı) yeni temaya göre yeniden çiziliyor.

#Widget Seviyesinde Tema Geçersiz Kılma (Override)

Theme(
  data: Theme.of(context).copyWith(
    colorScheme: Theme.of(context).colorScheme.copyWith(primary: Colors.red),
  ),
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Özel Renkli Buton'),
  ),
)

Bölüm 3 Konu 12'de öğrendiğimiz copyWith() kalıbı burada tekrar karşımıza çıkıyor — var olan temayı temel alıp, sadece belirli bir kısmını değiştirerek, sadece bir widget alt ağacı için geçerli olan yerel bir tema oluşturabilirsin.

#🎯 Bu Dersten Çıkarılması Gerekenler

• ThemeData, uygulamanın genelinde tutarlı stil (renk, font, buton görünümü) tanımlamanı sağlayan merkezi bir yapılandırma nesnesidir.
• Theme.of(context), widget ağacında "en yakın" tanımlı temayı bulur — bu, InheritedWidget mekanizmasına dayanır (Bölüm 8'de tam işleyeceğiz).
• ColorScheme.fromSeed(), tek bir ana renkten, Material Design kurallarına uygun bütünsel bir renk paleti üretir; primary/onPrimary gibi çiftler, renk ve o rengin üzerine yazı rengini eşleştirir.
• darkTheme + themeMode, karanlık mod desteğini sağlar; ThemeMode.system, cihaz ayarına göre otomatik seçim yapar.
• Theme widget'ı ile, bir widget alt ağacı için yerel olarak temayı geçersiz kılabilirsin.

#📝 Ödevler

• [ ] ThemeData ile uygulamana özel bir ana renk, buton stili ve metin teması tanımla, tüm uygulamada tutarlı şekilde kullan.
• [ ] ColorScheme.fromSeed() ile tek bir renkten tam bir renk paleti oluştur, primary/onPrimary ile bir widget stilini uygula.
• [ ] Karanlık mod / aydınlık mod arasında geçiş yapabilen bir switch ekle (themeMode ile).
• [ ] Theme widget'ı ve copyWith() kullanarak, sadece belirli bir widget için yerel bir tema geçersiz kılması yap.
• [ ] Kendi cümlelerinle, "Theme.of(context) nasıl doğru temayı buluyor" sorusunu, widget ağacı ve context kavramlarıyla ilişkilendirerek açıkla (tahmin edebildiğin kadarıyla — Bölüm 8'de tam mekanizmayı göreceğiz).

Sıradaki konu: Bölüm 4 — Konu 17: Responsive & Adaptive Tasarım (MediaQuery, LayoutBuilder, OrientationBuilder, Breakpoint Stratejileri)