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:
- 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.
- 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.
- 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.
- İ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 !
// 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.