Flutter — Theme

Flutter’da tema nedir, ne işe yarar ve nasıl kullanılır? Flutter’ın kendi dökümantasyonundan faydalanarak theme’dan bahsedeceğim.

Tema (theme) kavramı, bir Flutter uygulamasında kullanıcı arayüzünün genel görünümünü ve davranışını belirleyen önemli bir konsepttir. Temalar, renkler, yazı tipleri ve diğer stil özelliklerini içerir ve uygulamanızın tutarlı bir görünüme sahip olmasını sağlar. Flutter’da temalar, Theme sınıfı aracılığıyla uygulanır.

Flutter temalarının temel öğeleri şunlardır:

1. Renkler (Colors): Tema, genellikle uygulamanızdaki farklı bileşenler için belirli renkleri tanımlar. Örneğin, birincil renk (primary color), ikincil renk (secondary color), arka plan rengi, metin rengi gibi.
2. Yazı Tipleri (Typography): Tema, uygulama genelinde kullanılacak yazı tiplerini belirler. Başlık, alt başlık, gövde metni gibi farklı yazı tipleri tanımlanabilir.
3. Padding ve Margin Değerleri: Tema, bileşenler arasındaki boşlukları ve bileşenlerin içindeki boşlukları belirlemek için kullanılan değerleri içerebilir. Bu, uygulama genelinde bir düzen sağlar.
4. İkonlar (Icons): Tema, uygulama içinde kullanılacak ikonları belirleyebilir. Bu ikonlar genellikle uygulamanızın stilini ve kimliğini yansıtarak markalaşmaya katkı sağlar.

Neler yapabileceğini anlamanın en iyi yolu örneklendirmekten geçer. En doğru örneği bulabileceğimiz https://docs.flutter.dev/cookbook/design/themes linkine gidelim ve kodu inceleyelim. Eğer siz de denemek isterseniz google_fonts: ^6.1.0 kütüphanesini projenize kurmayı unutmayın !

ilk karşılaltığımız ekran bu olmalı

 // Varsayılan parlaklık ve renkleri tanımlak için bu kısmı kullanırız. 
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.purple,
          brightness: Brightness.light, //bu değişikliği yaparak açık temaya geçtiğini görebilirsiniz
        ),

        // Varsayılan `TextTheme`'yi tanımlar. Bu, headline, title ve metin gövdeleri için varsayılan metin stilini belirtir
        textTheme: TextTheme(
          displayLarge: const TextStyle(
            fontSize: 72,
            fontWeight: FontWeight.bold,
          ),
          titleLarge: GoogleFonts.oswald(
            fontSize: 30,
            fontStyle: FontStyle.italic,
          ),
          bodyMedium: GoogleFonts.merriweather(),
          displaySmall: GoogleFonts.pacifico(),
        ),

 title: Text(title,
            style: Theme.of(context).textTheme.titleLarge!
            .copyWith(color: Theme.of(context).colorScheme.onSecondary,) //copyWith ile birlikte theme'nın özelliklerini alır ve değşikilikler yapabiliriz
                ),

Bu kod, özel temalar kullanarak bir Flutter uygulamasının genel görünümünü nasıl özelleştireceğinizi gösterir. useMaterial3 özelliği ve ColorScheme sınıfı kullanılarak temel renk paleti tanımlanır, textTheme ile varsayılan metin stilleri belirlenir, ve GoogleFonts paketi ile özel yazı tipleri kullanılır. Bu sayede, uygulamanın genelinde tutarlı bir tasarım elde edilir. Dilediğiniz gibi çeşitlendirip, farklı varyasyonlarda kullanabiliriz. Flutter’ın en güçlü yanı bize tanıdığı bu özgürlüktür.