Flutter ColorScheme ile Esnek Arayüzler

Flutter'da ColorScheme, bir uygulamanın renk paletini yöneten en modern ve güçlü mekanizmadır. Material 3 (M3) standartlarıyla birlikte, sadece birkaç ana renk belirleyerek uygulamanın tüm görsel dilini (butonlar, kartlar, arka planlar, metinler) uyumlu bir şekilde oluşturmanıza olanak tanır.

---

1️⃣ ColorScheme Nedir?

ColorScheme, Flutter’da uygulamanın tüm renk paletini tek merkezden yönetmeyi sağlayan yapıdır.

Material Design’ın renk sistemini temel alır.

📌 Amaç:

• Tutarlı UI

• Kolay tema yönetimi

• Light / Dark tema uyumu

• Büyük projelerde sürdürülebilirlik

ColorScheme scheme = ColorScheme.light();

---

2️⃣ ColorScheme Neden Önemlidir?

Avantaj	Açıklama
🎯 Tutarlılık	Tüm bileşenler aynı renk mantığını kullanır
🌙 Dark Mode	Tek satırla dark tema
🔄 Bakım Kolaylığı	Renk değişikliği tek yerden
📱 Material Uyumu	Button, AppBar, Card otomatik uyum

---

3️⃣ ColorScheme Yapısı (Temel Alanlar)

🎨 Ana Renkler

Alan	Açıklama
primary	Ana renk
onPrimary	Primary üzerindeki yazı
secondary	Vurgu rengi
onSecondary	Secondary üzeri yazı

primary: Colors.blue,
onPrimary: Colors.white,

---

🧱 Arka Plan ve Yüzeyler

Alan	Açıklama
background	Genel arka plan
onBackground	Arka plan yazıları
surface	Kart, dialog
onSurface	Surface yazıları

---

⚠️ Hata Renkleri

error: Colors.red,
onError: Colors.white,

Kullanım alanları:

• Form doğrulama

• AlertDialog

• Snackbar

---

4️⃣ Light ve Dark ColorScheme

☀️ Light Tema

ColorScheme lightScheme = ColorScheme.light(
  primary: Colors.blue,
  secondary: Colors.orange,
  background: Colors.white,
);

🌙 Dark Tema

ColorScheme darkScheme = ColorScheme.dark(
  primary: Colors.blueGrey,
  secondary: Colors.tealAccent,
);

---

5️⃣ ThemeData ile ColorScheme Kullanımı

MaterialApp(
  theme: ThemeData(
    colorScheme: lightScheme,
    useMaterial3: true,
  ),
  darkTheme: ThemeData(
    colorScheme: darkScheme,
  ),
);

📌 Önemli:
useMaterial3: true → ColorScheme etkisi artar

---

6️⃣ Widget İçinde ColorScheme Kullanımı

ColorScheme colors = Theme.of(context).colorScheme;

Örnek Kullanım

Container(
  color: colors.primary,
  child: Text(
    "Merhaba Flutter",
    style: TextStyle(color: colors.onPrimary),
  ),
);

---

7️⃣ Button & AppBar ColorScheme Etkileşimi

ElevatedButton

ElevatedButton(
  onPressed: () {},
  child: Text("Kaydet"),
);

Primary ve onPrimary otomatik kullanılır ✔

---

AppBar

AppBar(
  title: Text("Ana Sayfa"),
);

primary rengi otomatik atanır ✔

---

8️⃣ Özel ColorScheme Tanımlama (Custom)

ColorScheme customScheme = ColorScheme(
  brightness: Brightness.light,
  primary: Color(0xFF3F51B5),
  onPrimary: Colors.white,
  secondary: Color(0xFFFFC107),
  onSecondary: Colors.black,
  error: Colors.red,
  onError: Colors.white,
  background: Color(0xFFF5F5F5),
  onBackground: Colors.black,
  surface: Colors.white,
  onSurface: Colors.black,
);

📌 Büyük projelerde en çok tercih edilen yöntem

---

9️⃣ ColorScheme vs Colors

Colors	ColorScheme
Dağınık	Merkezi
Tema uyumsuz	Tema uyumlu
Dark Mode zor	Dark Mode kolay

🚫 Kötü Kullanım

color: Colors.blue

✅ İyi Kullanım

color: Theme.of(context).colorScheme.primary

---

🔟 En İyi Uygulamalar (Best Practices)

✔ Color sabitlerini kaldır
✔ ColorScheme kullan
✔ Widget içinde Theme.of(context) çağır
✔ Light/Dark tema birlikte tasarla
✔ Material 3 aktif et

---

🎯 Eğitim & Proje Senaryosu

Örnek Proje:
📱 Login – Register Uygulaması

• Primary → AppBar & Button

• Error → Form hataları

• Surface → Card

• Dark Mode geçişi

---

📌 Özet

ColorScheme, Flutter uygulamalarında
🎨 profesyonel görünüm
🌙 dark–light uyumu
🔧 bakım kolaylığı sağlar.

---

---

1. ColorScheme Nedir?

ColorScheme, Material Design 3 renk sistemini temel alan bir sınıftır. Eskiden kullanılan ThemeData.primaryColor veya accentColor gibi tekil tanımlamalar yerine, renk rollerini kullanır.

Bir renk rolü, rengin ne olduğunu (örneğin "mavi") değil, ne işe yaradığını (örneğin "birincil aksiyon rengi") tanımlar.

2. Temel Renk Rolleri

Material 3 ile gelen ColorScheme yapısında renkler genellikle dörtlü gruplar halinde bulunur:

Rol Kategorisi	Açıklama
Primary	Uygulamanın ana rengi. En çok dikkat çeken bileşenlerde kullanılır.
Secondary	Daha az belirgin olan, yardımcı öğeler için kullanılan renk.
Tertiary	Kontrast oluşturmak veya belirli öğeleri vurgulamak için kullanılan üçüncü renk.
Error	Hata durumlarını (input hataları, uyarılar) belirtmek için kullanılır.
Surface	Kartlar, diyaloglar ve sayfaların arka planı için kullanılan renk.

Her rolün ayrıca "On" karşılığı vardır (örneğin onPrimary). Bu, o rengin üzerine yazılacak metin veya ikonun rengini belirler ve okunabilirliği garanti eder.

---

3. ColorScheme Oluşturma Yöntemleri

Flutter'da bir ColorScheme oluşturmanın birkaç yolu vardır:

A. Tek Bir Renkten Üretme (fromSeed)

Material 3'ün en sevilen özelliği budur. Tek bir ana renk (seed color) verirsiniz ve Flutter, o renkle uyumlu tüm paleti (tonal palettes) sizin için oluşturur.

Dart

ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.deepPurple,
    brightness: Brightness.light, // Açık veya koyu tema seçimi
  ),
)

B. Manuel Tanımlama

Eğer tasarımcınızdan gelen spesifik renk kodlarınız varsa, tüm rolleri manuel olarak doldurabilirsiniz:

Dart

const myColorScheme = ColorScheme(
  brightness: Brightness.light,
  primary: Color(0xFF6200EE),
  onPrimary: Colors.white,
  secondary: Color(0xFF03DAC6),
  onSecondary: Colors.black,
  error: Color(0xFFB00020),
  onError: Colors.white,
  surface: Colors.white,
  onSurface: Colors.black,
);

---

4. Uygulama İçinde Renk Kullanımı

Temanızdaki renklere kod içerisinde Theme.of(context) üzerinden erişirsiniz. Bu sayede tema değiştiğinde (örneğin karanlık moda geçildiğinde) renkler otomatik olarak güncellenir.

Dart

Container(
  color: Theme.of(context).colorScheme.primaryContainer,
  child: Text(
    "Merhaba Flutter",
    style: TextStyle(
      color: Theme.of(context).colorScheme.onPrimaryContainer,
    ),
  ),
)

İpucu: primaryContainer ve onPrimaryContainer, ana rengin daha yumuşak (düşük doygunlukta) bir versiyonunu sunar. Büyük alanları boyamak için primary yerine primaryContainer kullanmak gözü daha az yorar.

---

5. Dinamik Renkler (Dynamic Color)

Android 12+ cihazlarda kullanıcılar duvar kağıtlarına göre sistem renklerini değiştirebilirler. Flutter'da dynamic_color paketini kullanarak, uygulamanızın renklerinin kullanıcının duvar kağıdıyla uyumlu hale gelmesini sağlayabilirsiniz.

1. dynamic_color paketini ekleyin.

2. DynamicColorBuilder widget'ını kullanın.

---

6. Özet ve En İyi Pratikler

• Sert Renklerden Kaçının: Colors.black veya Colors.white yerine colorScheme.surface ve colorScheme.onSurface kullanın. Bu, karanlık mod desteğini kolaylaştırır.

• On-Renk Kuralı: Bir butonun rengini primary yaptıysanız, üzerindeki yazıyı mutlaka onPrimary yapın. Bu, erişilebilirlik (contrast ratio) standartlarını karşılamanızı sağlar.

• Material 3'ü Aktif Edin: ThemeData içinde useMaterial3: true olduğundan emin olun, aksi takdirde ColorScheme beklendiği gibi davranmayabilir.

Bu yapı sayesinde uygulamanız hem daha profesyonel görünür hem de kullanıcı tercihlerine (Gece/Gündüz modu) mükemmel uyum sağlar.

Harika! Makaleyi, hem blogunuzdaki okuyucular hem de öğrencileriniz için daha kapsayıcı hale getirmek adına Dark Mode (Karanlık Mod) yönetimi ve Custom Colors (Özel Renkler) ekleme bölümleriyle genişletelim.

---

7. Karanlık Mod (Dark Mode) Yönetimi

Material 3 ile ColorScheme, açık ve koyu tema arasındaki geçişi inanılmaz kolaylaştırır. Sistemin en büyük avantajı, aynı renk rollerinin (primary, surface vb.) her iki modda da farklı tonlarla tanımlanabilmesidir.

Temaları Tanımlama

Uygulamanızın MaterialApp kısmında hem theme hem de darkTheme parametrelerini kullanarak otomatik geçiş sağlayabilirsiniz:

Dart

MaterialApp(
  themeMode: ThemeMode.system, // Sistemin ayarına göre (açık/koyu) otomatik değişir
  theme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.light,
    ),
  ),
  darkTheme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.dark, // Koyu tema tonlarını otomatik üretir
    ),
  ),
);

Neden fromSeed Kullanmalıyız?

Karanlık modda renkler, açık moddaki kadar canlı (doygun) olmamalıdır. ColorScheme.fromSeed fonksiyonu, verdiğiniz ana rengin doygunluğunu karanlık moda uygun şekilde otomatik olarak düşürür (desaturation). Bu, metinlerin okunabilirliğini artırır ve göz yorgunluğunu azaltır.

---

8. ColorScheme'e Özel Renkler Ekleme (Extensions)

Bazen ColorScheme içindeki standart roller (Primary, Secondary vb.) yetmeyebilir. Örneğin, uygulamanıza özel bir "Başarı Yeşili" veya "Marka Turuncusu" eklemek isteyebilirsiniz. Bunun için en modern yöntem ThemeExtension kullanmaktır.

Adım 1: Özel Renk Sınıfı Oluşturma

Dart

class MyCustomColors extends ThemeExtension<MyCustomColors> {
  final Color? successGreen;
  
  const MyCustomColors({required this.successGreen});

  @override
  ThemeExtension<MyCustomColors> copyWith({Color? successGreen}) {
    return MyCustomColors(successGreen: successGreen ?? this.successGreen);
  }

  @override
  ThemeExtension<MyCustomColors> lerp(ThemeExtension<MyCustomColors>? other, double t) {
    if (other is! MyCustomColors) return this;
    return MyCustomColors(
      successGreen: Color.lerp(successGreen, other.successGreen, t),
    );
  }
}

Adım 2: Temaya Dahil Etme

Dart

ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
  extensions: <ThemeExtension<dynamic>>[
    const MyCustomColors(successGreen: Color(0xFF2E7D32)),
  ],
)

Adım 3: Kullanım

Dart

final customColors = Theme.of(context).extension<MyCustomColors>()!;
// ...
color: customColors.successGreen,

---

9. Öğrenciler İçin "Altın Kurallar"

Eğitimlerinizde öğrencilerinizin aklında kalması için şu 3 temel kuralı vurgulayabilirsiniz:

1. Direct Color Kullanma: Kod içerisinde asla Colors.red veya Color(0xFF...) gibi sabitler kullanmayın. Bunun yerine her zaman Theme.of(context).colorScheme.error kullanın.

2. Kontrast Uyumu: Eğer bir kutuyu secondaryContainer ile boyadıysanız, içindeki yazıyı mutlaka onSecondaryContainer yapın. Material 3 bu ikiliyi birbirine en uygun kontrastta hazırlar.

3. Yüzey Renkleri (Surface): Uygulama arka planı için Colors.white yerine surface kullanın. Çünkü Material 3'te "Surface" rengi, ana renkten (seed color) çok hafif bir ton alır, bu da uygulamanın daha bütünsel görünmesini sağlar.

---

Makale İçin Sonuç Bölümü Önerisi

"Flutter'da ColorScheme kullanmak, sadece renk seçmek değil, uygulamanın tüm görsel hiyerarşisini tek bir merkezden yönetmektir. Material 3'ün getirdiği bu esneklik, hem tasarımcıların hem de geliştiricilerin çok daha kısa sürede, her ekranda ve her modda (Karanlık/Aydınlık) mükemmel görünen arayüzler oluşturmasına olanak tanır."

---

Bu eklemelerle birlikte makale hem teorik hem de pratik (Extension kullanımı gibi ileri seviye konular) açıdan oldukça doyurucu oldu.

 theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.brown,
          brightness: Brightness.light,
        ),
      ),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.brown,
          brightness: Brightness.dark,
        ),
      ),
      themeMode: ThemeMode.system,