Flutter Provider ile Dinamik Tema Uygulaması
Herkese merhaba, Flutter’da Provider ile uygulamamıza dinamik tema ekleyebilmemiz için gerekli Türkçe kaynakları az bulduğumdan dolayı bu blogu yazmak istedim.
Aşağıdaki yazımda, basit bir şekilde, uygulamamızın ilk açılışta, sistem temasına göre (dark veya light tema) açılmasını sağlayıp ardından tema değiştirme butonları ile uygulamanın temasını dinamik olarak değiştirerek, en son seçilen temanın sistem hafızasına kaydedilmesini sağlayacağız.
Bu arada Provider’ı bilmiyorsanız önceden bakmanızı öneririm.
Haydi başlayalım…
Öncelikle pubspec.yaml dosyamıza,
https://pub.dev/packages/provider üzerinden provider paketini ve
https://pub.dev/packages/shared_preferences bağlantısından shared_preferences paketini ekleyelim.
Paketleri ekledikten sonra şimdi temalarımızı oluşturabiliriz .
Temalarımızı tutacağımız app_themes.dart dosyamızı oluşturuyoruz.
Temalarımızı enum olarak tuttuktan sonra istediğimiz stile göre yazabiliriz.
Enum objeler çoğu programlama dilinde olduğu gibi constant değerleri tutmak için kullanılır.
Şimdi theme.manager.dart sayfamızı oluşturacağız.
Burada, ThemeManager classımızı değişikliği bildirmesi için ChangeNotifier ile beraber kullanıyoruz.
Kullanacağımız propları(properties) yazıyoruz.
Ardından _loadTheme metodu ile uygulama ilk açıldığında, sistem hafızasına bakıp uygulama, önceden bir tema seçilmiş ise o tema ile, seçilmemişse sistem teması (Dark ise Dark, Light ise Light) ile açılacak.
Sonrasında ise temamızı değiştirmemizi sağlayan metodu yazıyoruz.
Başlangıçta _loadTheme metodunu çalıştırmamız lazım. Bunun için ThemeManager sınıfının constructor’ında metodu çağırmalıyız.
ThemeManager’ın son hali şu sekilde olmalı;
Son olarak main.dart dosyamız kaldı.
Provider yapısını kullanıyoruz.
MaterialApp’in yani uygulamamızın theme özelliğine ThemeManager’da belirttiğimiz themeData’yı veriyoruz.
Provider yapısı ile dinlemesini sağlıyoruz.
En son olarak body kısmında ekleyeceğimiz butonlar ile temayı değiştirmeyi sağlayacağız.
theme.setTheme(AppTheme.Light) diyerek setTheme yeni temayı gönderebiliriz. Başka sayfalardan ise;
kod parçasını ekleyerek temanın değişmesini sağlayabiliriz.
main.dart’ın son hali ise;
Umarım faydalı olmuştur. Yardımcı olabileceğim her soru için Linkedin hesabımdan bana ulaşabilirsiniz. Teşekkürler…
Source Code:
