Flutter’da Dinamik Tema
Selamlar!
Bu yazıda hazır bir uygulama üzerinde, renklerin anlık olarak değiştirilmesi ve kalıcı olarak kaydedilmesine değineceğiz.
Kullanacağımız kütüphaneler:
provider: ^3.2.0
flutter_material_color_picker: ^1.0.5
shared_preferences: ^0.5.3+4Hemen aşağıda kaynak kodunu verdiğim uygulama üzerinden örnekleri yapacağız.
https://github.com/AliAnilKocak/flutter_dynamic_theme
MaterialColorPicker kütüphanesi ile uygulamada kullanılacak rengi seçeceğiz. Ardından bu renk değerini SharedPreferences’a kaydedeceğiz. Bu sayede kaydettiğimiz tema uygulama kapanıp açılsa bile aktif olarak kalacaktır. Ayrıca seçtiğimiz rengin uygulamanın tüm ekranlarına etki edebilmesi için Provider kütüphanesini kullanacağız.
Material Color Picker
Material Color Picker kütüphanesi ile rengi seçelim.
Ardından uygulamanın üst kısmındaki “Tema Değiştir” yazısını GestureDetector ile sarmalayıp onTap ksmında dialog’u açtıralım.
Provider
ThemeNotifier class’ı oluşturalım.
Uygulamanın tüm ekranlarına etki etmesi için runApp içini aşağıdaki gibi yapalım.
Seçtiğimiz rengin uygulama içerisinde anlık olarak değiştirilmesi için MaterialColorPicker kütüphanesinin onColorChange fonksiyonu içerisinde rengi tuttuğumuz provider’ı güncelleyelim.
Bu adımda son olarak yukarıdaki gibi manuel olarak verdiğimiz renklere themeColor.getColor() diyerek son kaydettiğimiz rengin aktifleştirilmesini sağlıyoruz.
Şimdi test aşamasına geçelim.
Shared Preferences
Uygulamayı kapatıp açtığımızda son kaydettiğimiz renk aktif olmayacaktır. Bunun için SharedPreferences kullanarak son seçtiğimiz rengin telefon hafızasına kaydolmasını sağlayacağız. Main metodunun içerisinde kaydettiğimiz rengi seçip uygulama açıldığında rengin aktifleşmesini sağlayacağız.
MaterialColorPicker içerisindeki onColorChange fonksiyonunun içerisinde seçtiğimiz rengi sharedPreferences’a kaydedelim.
Son aşamada SharedPreferences’a kaydettiğimiz rengi uygulama açılırken(runApp) provider’a uygulayalım.
Uygulamanın kaynak kodu:
Diğer kaynaklar:
