Flutter Theming Nedir?

Merhaba, bu yazımda Flutter Theming’in ne olduğunu açıklamaya çalışacağım. Umarım bu yazım hem benim bu konuyu anlama hem de okuyucuların anlamasına katkıda bulunur. İyi okumalar.

Flutter Theming, Flutter uygulamalarının görünümünü ve hissini belirlemenin ve özelleştirmenin bir yoludur. Temalar, uygulama içinde kullanılan renkler, yazı tipleri, görsel öğeler ve diğer tasarım özelliklerini düzenlemek ve ayarlamak için kullanılır. Bu, uygulamanızın kullanıcı ara yüzünün tutarlı ve güzel görünmesini sağlar.

Flutter, Materyal tasarım ve Cupertino olmak üzere iki temel tema ile birlikte gelir. Materyal tasarım, Google’ın geliştirdiği ve modern ve çekici bir tasarım diline sahip olan popüler bir tasarım standardını temsil eder. Cupertino tema ise Apple’ın iOS platformunun görünüm ve hissini yansıtır.

Flutter’da, varsayılan olarak “Light Theme” ve “Dark Theme” adı verilen iki tema bulunur. Light Theme, açık mavi renkte bir tema sunar, Dark Theme ise düşük ışık koşullarında enerji tasarrufu sağlamak ve göz yorgunluğunu azaltmak için turkuaz renkli bir temadır. Dark Theme’i kullanmak için, MaterialApp widget’ının theme özelliğini ThemeData.dark() ile ayarlayabilirsiniz.

 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData.dark(),
     home: HomeScreen(),
   );
 }

ThemeData İle Özel Global Tema Oluşturma

ThemeData sınıfı, bir materyal tasarım teması için renk ve tipografi değerlerini tutar. Bu sınıfı, genel özel temanızı oluşturmak için MaterialApp widget’ına ekleyebilir ve aşağıdaki özelliklerden herhangi birini yapılandırabilirsiniz:

• brightness
• primarySwatch
• primaryColor
• accentColor
• scaffoldBackgroundColor
• buttonTheme
• textTheme
• fontFamily
• iconTheme
• appBarTheme
• floatingActionButtonTheme

ve daha fazlası.

Ayrıca, ThemeData sınıfı kullanılarak özel temalar oluşturabilirsiniz. ThemeData sınıfı, renkler, yazı tipleri ve daha fazlası gibi temaya ait değerleri saklar. Bu değerleri özelleştirmek için theme özelliğini kullanabilirsiniz. Örneğin, primaryColor, accentColor, ve scaffoldBackgroundColor gibi özellikleri ayarlayarak özel bir tema oluşturabilirsiniz.

Renklerle çalışırken, Colors sınıfı Material paletten renkleri içerir. Renk sınıfını kullanarak, Material paletin dışındaki renkleri de tanımlayabilirsiniz. Ayrıca, Color sınıfını kullanarak ARGB (Alpha, Red, Green, Blue) formatındaki renk değerlerini belirleyebilirsiniz.

Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(
        primaryColor: Colors.red,
        accentColor: Colors.amber,
        scaffoldBackgroundColor: Colors.black,
      ),
     home: HomeScreen(),
   );
 }

Ana renkleri (primaryColor) ve vurgu renklerini (accentColor) değiştirerek temayı özelleştirebilirsiniz. ThemeData’dan yeni bir tema oluşturmak için copyWith() yöntemini kullanabilirsiniz.

Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData.light().copyWith(
        primaryColor: Color(0xff455a64),
        accentColor: Color(0xffffc400),
        scaffoldBackgroundColor: Color(0xffF5F5F6),
      ),
     home: HomeScreen(),
   );
 }

Metinle çalışırken, textTheme özelliğini ThemeData nesnesinin içeriğini net ve etkili bir şekilde sunmak için başlık metinleri, gövde metinleri, düğme metni, başlık ve alt çizgiyi ayarlamak için kullanabilirsiniz. Ayrıca, Materyal Tasarım Tipografi Sistemi hakkında daha fazla bilgi edinebilirsiniz ve WhatFont gibi eklentileri kullanarak örnek tasarımdan metin stilleri seçebilirsiniz.

Özel yazı tipleri kullanmak isterseniz, önce projenize özel yazı tiplerini eklemeniz gerekecektir. Bu yazı tiplerini ThemeData içinde kullanabilirsiniz.

Temayı sıfırdan oluşturmak yerine, seçilen temanın copyWith() yöntemini çağırarak bu temanın bir kopyasını oluşturabilirsiniz.

Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData.light().copyWith(
        primaryColor: Color(0xff455a64),
        accentColor: Color(0xffffc400),
        scaffoldBackgroundColor: Color(0xffF5F5F6),
      ),
     home: HomeScreen(),
   );
 }

Temanızı widgetlere uygulamak için Theme.of(context)'i kullanabilirsiniz. Bu, widgetlerin renklerini ve metin stillerini uygulamanın belirlediği tema ile uyumlu hale getirmenize yardımcı olur.

Temanın uygulama genelinde nasıl değiştirileceği konusunda daha fazla kontrol elde etmek için, özel temaları belirli bir bölümle sarmak için Theme widget'ını kullanabilirsiniz.

Flutter ayrıca, ColorScheme özelliği ile çeşitli bileşenlerin renk özelliklerini yapılandırmanıza olanak tanır. Bu renkleri ThemeData.from() yöntemi ile kullanabilirsiniz.

Widget build(BuildContext context) {
 return MaterialApp(
   theme: ThemeData.from(
    colorScheme: ColorScheme.light().copyWith(
      primary: Color(0xff455a64),
      primaryVariant:  Color(0xff1c313a),
      secondary: Color(0xffffc400),
      secondaryVariant: Color(0xffc79400),
      // ...More
     ),
   );
}

Son olarak, temaları ayrı dosyalarda saklayarak temalarınızı daha iyi yönetebilirsiniz. Özel temalar oluşturabilir ve theme, darkTheme, ve themeMode özelliklerini kullanarak temaları uygulamanızın farklı kısımlarında değiştirebilirsiniz.

final ThemeData _bmiTheme = AppTheme.buildBmiTheme(); // Theme class for light theme
final ThemeData _bmiThemeDark = AppThemeDark.buildBmiTheme(); // Theme class for dark theme

void main() => runApp(BMICalculator());

class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      final ThemeData base = ThemeData.light();
            return MaterialApp(
   theme: _bmiTheme,
   darkTheme: _bmiThemeDark,
   themeMode: ThemeMode.dark, 
   home: HomeScreen(),
          );
     }
}

Flutter uygulamalarında temalar ve bu temalarda nasıl değişiklikler yaparak uygulamalarımızı kişiselleştirebileceğimizi açıklamaya çalıştım. Vakit ayırıp okuduğunuz için teşekkür ederim. İyi çalışmalar dilerim.