Theme ve ThemeData — Nedir, İlkeleri ve Stil Yapılandırması

Theme ve ThemeData Nedir

ThemeData, bir Material uygulamasının görsel stilinin tam açıklamasını içeren bir sınıftır. theme veya darkTheme parametresi aracılığıyla MaterialApp'e iletilir ve tüm alt widget'lar tarafından miras alınır. Her Material Design widget'ı, stillerini almak için ThemeData'yı kullanır: düğme renkleri, AppBar boyutları, metin stilleri, kart kenar boşlukları ve simgeler.

ThemeData'nın merkezinde, primary, secondary, surface, error ve diğer renkleri tanımlayan ColorScheme bulunur. Bu renklerden, tüm Material bileşenleri için durumlar (hover, focus, pressed) otomatik olarak hesaplanır. Örneğin, ElevatedButton arka plan için primary rengini ve metin için onPrimary'i kullanır — ek yapılandırma gerekmez.

Theme widget'ı, temayı widget ağacında aşağı doğru yayan bir InheritedWidget'dır. Herhangi bir widget, Theme.of(context) aracılığıyla geçerli temaya erişebilir ve ayrıca Theme.copyWith veya ThemeData.copyWith aracılığıyla geçersiz kılınmış değerlerle mevcut temayı temel alan yeni bir tema oluşturabilir.

Özet: ThemeData, uygulamanın stillerinin tek kaynağıdır. Geliştirmeye ThemeData'yı tanımlayarak başlayın — bu, tüm projenin görsel dilini belirler ve farklı ekranlarda dağınık stilleri önler.

ColorScheme: Renk Paletinin Temeli

ColorScheme, Material 3'te temalaştırmanın merkezi öğesidir. Kullanımdan kaldırılan primarySwatch ve primaryColor'ın yerini alarak tüm durumlar ve bileşenler için eksiksiz bir renk kümesi sağlar.

ColorScheme 12 ana renk içerir: primary, onPrimary, secondary, onSecondary, surface, onSurface, error, onError, background, onBackground, outline ve shadow. Her renk için açık ve koyu varyantların yanı sıra hover, focus, pressed ve dragged durumlarının renkleri otomatik olarak hesaplanır. Yalnızca primary belirtildiğinde, çerçeve kalan renkleri ColorScheme.fromSeed aracılığıyla otomatik olarak oluşturur.

ColorScheme.fromSeed yöntemi (Material 3), bir temel renk olan seedColor alır ve Material Design 3 algoritmasına dayalı olarak tam bir uyumlu palet oluşturur. Bu, tamamlayıcı ve analog renklerin manuel olarak seçilmesi ihtiyacını ortadan kaldırır. Tek bir birincil marka rengi iletmeniz yeterlidir ve ColorScheme.fromSeed tüm Material sistemi için tutarlı bir palet oluşturur.

Özet: yeni projelerde, palet oluşturmak için ColorScheme.fromSeed kullanın. Material 2 uyumluluğu için — primarySwatch kullanın. ColorScheme, Material 3 için minimum gerekliliktir.

Tipografi ve TextTheme: Uygulama Yazı Tipleri

TextTheme, ThemeData'nın tüm başlık seviyeleri, alt başlıklar, gövde metni ve etiketler için metin stillerini tanımlayan bir parçasıdır. Material Design 15 metin stili tanımlar: headlineLarge, headlineMedium, headlineSmall, titleLarge, titleMedium ve diğerleri.

Tipografi, otomatik yazı tipi yüklemesi için GoogleFonts aracılığıyla veya özel TextStyle nesneleriyle yerleşik Theme.of(context).textTheme aracılığıyla ayarlanır. GoogleFonts, google_fonts paketi aracılığıyla yüzlerce yazı tipi sağlar ve ilk yüklemeden sonra bunları yerel olarak önbelleğe alır. Alternatif, yazı tiplerini pubspec.yaml aracılığıyla proje varlıklarına gömmektir.

Uyarlanabilir tipografi için TextTheme, MediaQuery.textScaleFactor değerini destekler — sistem yazı tipi boyutu arttığında, tüm metin stilleri orantılı olarak ölçeklenir. Ek olarak, MediaQuery.size.width'e bağlı olarak isTest aracılığıyla farklı form faktörleri için farklı yazı tipi boyutları ayarlanabilir.

Özet: ThemeData'da TextTheme'ı tanımlayın ve tüm metin öğeleri için Theme.of(context).textTheme kullanın. Bu, yazı tipi tutarlılığını sağlar ve küresel tipografi değişikliklerini basitleştirir.

Tema Kalıtımı ve Geçersiz Kılma

Theme, temayı ebeveynden çocuğa yayan bir InheritedWidget'dır. Herhangi bir alt widget, Theme.of(context) aracılığıyla geçerli temayı okuyabilir ve ThemeData.copyWith aracılığıyla değişikliklerle kendi kopyasını oluşturabilir.

Kalıtım mekanizması: bir widget yeni verilerle bir Theme içine sarılırsa, tüm alt öğeleri geçersiz kılınan temayı görürken, bu sargının dışındaki widget'lar orijinal temayı görür. Bu, örneğin, belirli bir ekran için stilleri izole etmeye olanak tanır: bir başlık, değiştirilmiş bir AppBarTheme ile özel bir tema kullanırken, uygulamanın geri kalanı standart temayı kullanır.

Theme iç içe geçmesi sınırsız olabilir. Flutter hiyerarşik arama kullanır: Theme.of(context) çağrıldığında, çerçeve ilk Theme'a kadar ağaçta yukarı çıkar ve temasını döndürür. Hiçbir Theme bulunamazsa — bir istisna atılır. Bu nedenle, MaterialApp uygulamayı her zaman bir Theme içine sarar.

Özet: Theme kalıtımı, stilleri izole etmek için esnek bir mekanizmadır. Küresel yapılandırmayı çoğaltmadan ayrı ekranlar için tema geçersiz kılma kullanın.

Koyu Tema: Uygulamanın Koyu Modu

Koyu tema, Flutter'ın açık ve koyu temalar arasında geçiş yapma yerleşik yeteneğidir. ThemeData, MaterialApp'in theme (açık) ve darkTheme (koyu) parametrelerinde saklanır. themeMode parametresi modu kontrol eder: ThemeMode.light (her zaman açık), ThemeMode.dark (her zaman koyu) veya ThemeMode.system (sistem ayarlarını takip eder).

Koyu bir tema uygularken, tüm stilleri sıfırdan oluşturmak gerekmez. Sadece ColorScheme.fromSeed(seedColor, brightness: Brightness.dark) değerini darkTheme'a iletin. Çerçeve, koyu bir arka plan için renkleri otomatik olarak ayarlayacaktır: surface koyu gri olur, metin açık olur. Diğer alt temalar (AppBarTheme, CardTheme, BottomNavigationBarTheme), açıkça geçersiz kılınmadıkça açık sürümden miras alınır.

Temalar arasında yumuşak geçişler için Flutter, AnimatedTheme aracılığıyla animasyon sağlar. themeMode değiştiğinde, renkler ve stiller animasyon yaparak görsel olarak hoş bir geçiş oluşturur. AnimatedTheme, animasyon hızını yapılandırmak için Duration ve Curve kullanır.

Özet: koyu tema, darkTheme ve ColorScheme.fromSeed ile brightness: Brightness.dark kullanılarak uygulanır. Kullanıcının sistem ayarlarını takip etmek için ThemeMode.system kullanın.

Theme ve ThemeData ile Kod Örnekleri

Örnek 1 — ColorScheme.fromSeed kullanarak MaterialApp aracılığıyla küresel tema yapılandırması.

final ThemeData appTheme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.indigo,
    brightness: Brightness.light,
  ),
  appBarTheme: const AppBarTheme(
    centerTitle: true,
    elevation: 0,
  ),
  cardTheme: const CardTheme(
    elevation: 2,
    margin: EdgeInsets.all(8),
  ),
);

return MaterialApp(
  theme: appTheme,
  themeMode: ThemeMode.system,
  home: const MyHomePage(),
);

Bu örnek, Material 3, çivit mavisi tabanlı renk şeması ve özel AppBar ve Card stilleri içeren bir ThemeData oluşturur. useMaterial3, yeni Material 3 tema sistemini etkinleştirir ve ColorScheme.fromSeed tam paleti oluşturur.

Örnek 2 — temaya erişim ve uygulamanın bir bölümü için geçersiz kılma.

Widget build(BuildContext context) {
  final theme = Theme.of(context);

  return Column(
    children: [
      Text(
        'Standard headline',
        style: theme.textTheme.headlineMedium,
      ),
      Theme(
        data: theme.copyWith(
          colorScheme: theme.colorScheme.copyWith(
            primary: Colors.orange,
          ),
        ),
        child: const SpecialSection(),
      ),
    ],
  );
}

İkinci örnek, stilleri okumak için Theme.of(context) kullanımını ve küresel yapılandırmayı değiştirmeden ağacın bir bölümünde temayı geçersiz kılmak için copyWith ile Theme() kullanımını gösterir. Theme içindeki SpecialSection turuncu primary rengini alırken, uygulamanın geri kalanı orijinal çivit mavisini korur.

Özet: küresel tema MaterialApp'te ayarlanır, Theme.of(context) aracılığıyla erişilir ve copyWith ile Theme aracılığıyla geçersiz kılınır. Material 3 için ColorScheme.fromSeed kullanın.

Tema Yapılandırmasında Yaygın Hatalar

Hata 1: Material 3'te ColorScheme yerine primarySwatch kullanmak. primarySwatch kullanımdan kaldırılmıştır ve Material 3'te desteklenmez. primarySwatch ile useMaterial3: true kullanıldığında, Flutter bir uyarı verir. Çözüm: palet oluşturma için ColorScheme.fromSeed'e geçin.

Hata 2: Theme.of(context) kullanmak yerine widget'larda renkleri sabit kodlamak. Geliştiriciler, temadaki primary veya secondary rengi yerine doğrudan bir Container'da Colors.blue yazar. Tema değiştiğinde, bu renkler değişmeden kalır ve tek tip stili bozar. Çözüm: her zaman Theme.of(context).colorScheme.primary veya temadaki diğer renkleri kullanın.

Hata 3: darkTheme eksikliği. Uygulama darkTheme tanımlamazsa, cihazda koyu tema etkinleştirildiğinde, Flutter otomatik olarak açık temayı uyarlamaya çalışır ve bu genellikle düşük kaliteli bir sonuç verir. Çözüm: koyu tema bir öncelik olmasa bile MaterialApp'e her zaman darkTheme iletin — bu kullanıcılar için önemli bir UX'dir.

Hata 4: her build'de yeni tema oluşturmak. ThemeData build yöntemi içinde oluşturulursa, her widget yeniden oluşturma yeni bir tema nesnesi oluşturarak InheritedWidget optimizasyonunu bozar. Çözüm: ThemeData'yı build dışında bir static alana veya const yapıcıya taşıyın.

Özet: doğru temalaştırma merkezi bir yaklaşım gerektirir. ThemeData'yı sabitlere taşıyın, temadan renk şemaları kullanın ve her zaman her iki temayı da — açık ve koyu — tanımlayın.