Flutter İle Karanlık Mod Desteği Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu rehberi uygulamak için bilgisayarınızda Flutter SDK'nın 3.24 veya daha yeni bir sürümünün yüklü olması önerilir. 2026 yılı standartları gereği, Material 3 (M3) tasarım dilini varsayılan olarak kullanacağız. Projenizi oluştururken terminalde flutter create proje_adi komutunu kullanabilirsiniz.

• Flutter SDK 3.24+
• Dart 3.5+
• IDE: VS Code veya Android Studio (Flutter eklentileri kurulu)
• Temel düzeyde State Management bilgisi

Adım 1: MaterialApp İçerisinde Tema Yapılandırması

Uygulamanın tema yönetim merkezi MaterialApp widget'ıdır. Burada hem aydınlık (light) hem de karanlık (dark) mod için ayrı ThemeData nesneleri tanımlarız. Aşağıdaki örnek, uygulamanızın temel tema ayarlarını nasıl yapılandıracağınızı gösterir.

MaterialApp(
  title: 'Karanlık Mod Uygulaması',
  theme: ThemeData(
    useMaterial3: true,
    brightness: Brightness.light,
    colorSchemeSeed: Colors.blue,
  ),
  darkTheme: ThemeData(
    useMaterial3: true,
    brightness: Brightness.dark,
    colorSchemeSeed: Colors.blue,
  ),
  themeMode: ThemeMode.system, // Sistem ayarlarını takip et
  home: const AnaSayfa(),
);

Burada themeMode parametresi kritik öneme sahiptir. ThemeMode.system seçeneği, cihazın kendi ayarlarındaki karanlık/aydınlık tercihini otomatik olarak algılar ve uygular.

Adım 2: Renk Şemalarını Özelleştirme

Varsayılan temalar bazen kurumsal kimliğinize uyum sağlamayabilir. ColorScheme nesnesini kullanarak, karanlık modda görünmesini istediğiniz özel renkleri tanımlayabilirsiniz. Bu yöntem, uygulamanın kontrast oranlarını koruyarak erişilebilirliği artırır.

final lightTheme = ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.deepPurple,
    brightness: Brightness.light,
  ),
);

final darkTheme = ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.deepPurple,
    brightness: Brightness.dark,
  ),
);

Bu yaklaşım, tüm widget'larınızın renklerini otomatik olarak seçilen seedColor üzerinden hesaplar ve tutarlı bir görsel dil oluşturur.

Adım 3: Kullanıcı Tercihini Yönetme (State Management)

Sistem ayarlarından bağımsız olarak, kullanıcıya uygulama içi bir "Karanlık Modu Aç/Kapat" seçeneği sunmak isteyebilirsiniz. Bunun için ChangeNotifier kullanarak basit bir tema sağlayıcı oluşturmak en verimli yoldur.

class TemaDegistirici extends ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.system;

  ThemeMode get themeMode => _themeMode;

  void temaDegistir(bool isDark) {
    _themeMode = isDark ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }
}

Bu sınıf, uygulamanın herhangi bir yerinden tema değişikliğini tetiklememize ve tüm ekranların anlık olarak güncellenmesini sağlamamıza olanak tanır.

Adım 4: Widget'larda Tema Kullanımı

Kodunuz içerisinde sabit renkler kullanmak yerine Theme.of(context) yapısını kullanmalısınız. Bu, temanız değiştiğinde widget'larınızın otomatik olarak renk değiştirmesini sağlar. Sabit renkler kullanmak, karanlık modun düzgün çalışmasını engelleyen en yaygın hatadır.

Container(
  color: Theme.of(context).colorScheme.surface,
  child: Text(
    'Merhaba Dünya',
    style: TextStyle(
      color: Theme.of(context).colorScheme.onSurface,
    ),
  ),
);

Yukarıdaki örnekte surface arka planı, onSurface ise metin rengini temsil eder. Bu, Material Design prensiplerine göre en güvenli renk eşleşmesidir.

Tema Yönetim Yöntemleri Karşılaştırması

Adım 5: Karanlık Modda Güvenlik ve Uyarılar

Kritik Uyarı: Uygulamanızda karanlık mod desteği sunarken, kullanıcı verilerini yerel depolama (SharedPreferences veya Hive) üzerinde tutuyorsanız, bu verilerin şifrelenmiş olduğundan emin olun. Ayrıca, kontrast oranlarını (WCAG standartları) kontrol etmek için Flutter'ın sunduğu AccessibilityTools paketini kullanmayı ihmal etmeyin.

Uygulamanızda kullanıcı tercihlerini saklarken flutter_secure_storage gibi kütüphaneler kullanarak, tema ayarlarının güvenli bir şekilde kalıcı olmasını sağlayabilirsiniz.

// Tercihi kaydetme örneği
final prefs = await SharedPreferences.getInstance();
await prefs.setBool('isDarkMode', true);

Sıkça Sorulan Sorular

Karanlık modda resimlerin parlaklığını nasıl ayarlarım?

Resimleriniz için ColorFiltered widget'ını kullanarak karanlık modda resmin opaklığını veya doygunluğunu azaltabilirsiniz.

Neden bazı widget'larım tema değişince güncellenmiyor?

Bunun sebebi genellikle Theme.of(context) yerine sabit renk kodları (Hex) kullanmanızdır. Tüm renkleri ThemeData üzerinden çekmelisiniz.

Sistem ayarı değiştiğinde uygulama yeniden mi başlıyor?

Hayır, Flutter'ın MaterialApp widget'ı, tema verisi değiştiğinde tüm alt ağacı (widget tree) yeniden oluşturur (rebuild), bu da kesintisiz bir geçiş sağlar.

Karanlık mod için özel bir ikon setine ihtiyacım var mı?

Hayır, Icons kütüphanesindeki ikonlar otomatik olarak onSurface rengini alır, bu yüzden ekstra bir işleme gerek yoktur.

Karanlık modda pil tasarrufu gerçekten sağlanıyor mu?

Evet, özellikle OLED ekranlarda siyah pikseller kapalı olduğu için ciddi oranda enerji tasarrufu sağlanır.

İleri Düzey İpucu: Dinamik Tema Geçişlerinde Animasyon Kullanımı

Kullanıcılar tema değiştirdiğinde, sert bir geçiş yerine yumuşak bir animasyon deneyimi, uygulamanızın kalite algısını doğrudan artırır. Flutter'ın yerleşik Theme widget'ı, tema geçişlerini otomatik olarak animasyonlu hale getirmez. Bunu başarmak için AnimatedTheme widget'ını kullanabilir veya özel bir geçiş efekti tanımlayabilirsiniz.

Aşağıdaki örnek, uygulama genelinde tema değişirken renklerin belirli bir süre içerisinde yumuşakça geçiş yapmasını sağlar:

AnimatedTheme(
  data: isDarkMode ? ThemeData.dark() : ThemeData.light(),
  duration: Duration(milliseconds: 500),
  curve: Curves.easeInOut,
  child: Scaffold(
    body: Center(child: Text("Yumuşak Geçişli Tema")),
  ),
)

Karanlık Modda Performans ve Hata Ayıklama (Debugging)

Karanlık mod geliştirirken en sık karşılaşılan hatalardan biri, "hard-coded" (sabit kodlanmış) renklerin kullanılmasıdır. Eğer bir widget içerisinde Colors.black veya Colors.white değerlerini doğrudan kullanırsanız, tema değiştiğinde bu renkler güncellenmeyecek ve kullanıcı arayüzünde okunabilirlik sorunları oluşacaktır.

Hata Ayıklama Stratejileri

• Renk Kontrolü: Uygulamanızda Colors.black veya Colors.white araması yaparak, bunların yerine Theme.of(context).colorScheme.surface veya Theme.of(context).colorScheme.onSurface gibi dinamik referanslar kullanıldığından emin olun.
• DevTools Kullanımı: Flutter DevTools içerisindeki "Inspector" aracını kullanarak, seçili bir widget'ın hangi tema değerlerini aldığını canlı olarak inceleyin.
• Erişilebilirlik Testi: Karanlık modda metinlerin arka planla olan kontrast oranını (WCAG standartlarına göre en az 4.5:1) kontrol edin. Düşük kontrast, görme engelli kullanıcılar için ciddi bir engeldir.

Performans İpuçları

Tema değişiklikleri sırasında tüm ağaç yapısının (widget tree) yeniden oluşturulması bazen performans kaybına yol açabilir. Bunu engellemek için:

1. Const Kullanımı: Tema bağımlılığı olmayan statik widget'larınızı const olarak tanımlayın. Bu, Flutter'ın yeniden oluşturma (rebuild) aşamasında bu widget'ları atlamasını sağlar.
2. RepaintBoundary: Çok karmaşık çizimler içeren ekranlarda, tema değiştiğinde yeniden boyanmasını istemediğiniz alanları RepaintBoundary widget'ı ile sararak performans optimizasyonu yapın.

Sonuç

Flutter ile karanlık mod desteği eklemek, sadece estetik bir dokunuş değil, aynı zamanda kullanıcı dostu ve profesyonel bir uygulama geliştirmenin temel taşıdır. Bu rehberde öğrendiğiniz ThemeData yapılandırması, ColorScheme kullanımı ve ThemeMode yönetimi ile uygulamanızı 2026 standartlarına uygun hale getirebilirsiniz. Bir sonraki adım olarak, uygulamanızın renk paletini FlexColorScheme gibi kütüphanelerle daha da zenginleştirmeyi deneyebilirsiniz.

Sorumluluk Reddi: Bu makaledeki kod örnekleri genel eğitim amaçlıdır. Uygulamanızın üretim ortamına (production) taşınmadan önce tüm erişilebilirlik ve performans testlerinden geçtiğinden emin olun. Yazılım güvenliği sorumluluğu geliştiriciye aittir.