👨🏼‍💻Flutter|Açık/Koyu Tema tasarımında ThemeData-ThemeExtension kullanmak(Flutter 3.0'ın yeni özelliği)

Flutter 3.0

Herkese Merhaba 👋 Bu yazımda Flutter 3.0 ile kullanmaya başladığımız “Theme Extension” hakkında konuşacağım.

Giriş

Flutter 3.0 Dart 2.17 ile birlikte 5 mayıs 2022'de yayınlandı. Tabi bu yeni sürüm beraberinde bazı güzel değişiklikleri de getirdi. Bunlardan biri de temaları daha geniş bir şekilde kullanmamızı sağlayacak olan “Theme Extension” özelliği. Gelin hep beraber bu yeni özelliğin nasıl kullanılacağına bakalım:

ThemeExtension

ThemeData temayla alakalı hemen hemen her şeyi yönettiğimiz widget’tır. “Theme Extension” ThemeData’ya eklediğimiz bir parametredir. “extensions” ismiyle karşımıza çıkmaktadır:

Iterable<ThemeExtension<dynamic>>? extensions,

Bu yeni özelliğimizin nasıl temaya eklendiğine bakalım.

Öncelikle ThemeExtension sınıfımızın kod kısmına bakalım:

ThemeExtension

Görüldüğü gibi ThemeExtension abstract sınıfının iki tane zorunlu metodu bulunmaktadır.

Şimdi bu özelliği nasıl kullanacağımızı görelim:

İmplementasyon

Burada tasarlayacağımız widget’ın tüm stilini ThemeData widget’ının extensions parametresinden alacağız.

Hem açık hem de koyu tema için farklı renkler ve text stillerini extensions olarak ekleyeceğiz. Hadi hep beraber bunun nasıl yapılacağına bakalım:

Oluşturacağımız kartın stiline şu özellikleri ekleyeceğiz:

i. titleTextStyle

ii. subtitleTextStyle

iii. backgroundColor

iv. circleBackgroundColor

1. Theme Extension Oluşturmak

Bir tane ThemeExtension oluşturup themeData’larda bunu kullanacağız:

ThemeExtension tipi oluşturduğumuz classın tipiyle aynı olmalıdır:

class CardTheme extends ThemeExtension<CardTheme>{}

Şimdi de zorunlu olarak iki metodu ekleyelim. varsayılan olarak şu şekilde eklenmektedir:

Burada iki metodun dönüş tiplerinin ThemeExtention<CardTheme> olduğu görülmektedir. Biz bu dönüş tiplerini CardTheme olarak değiştireceğiz:

Şimdi yukarıda liste olarak verdiğimiz kart stil elemanlarını constructor olarak CardTheme sınıfımıza ekleyelim:

Constructor

copyWith metoduna parametre olarak construtor parametrelerinin aynısını yazalım ve bu metodu tamamlayalım:

Şimdi de lerp metodunun içini dolduralım:

CardTheme sınıfımız tamamen oluşmuş durumda. Tüm kodu aşağıda görebilirsiniz:

2. ThemeData Oluşturmak

Burada bir Map içerisinde hem açık hem de koyu tema için ThemeData’lar oluşturacağız. Fakat içerisine sadece extension ve scaffoldBackgroundColor ekleyeceğiz.

3. MyApp Widgetının Düzenlenmesi

Öncelikle açık/koyu tema arasındaki seçim için bir fonksiyon yazalım:

bool isLight=true;

void _selectTheme(){
  setState(()=> isLight=!isLight);
}

Şimdi MaterialApp wıdgetını düzenleyip temaları ekleyelim:

MyApp’te yapacağımız değişiklikler bu kadar. Şimdi kart tasarımına geçelim:

4.Kart Tasarımı

Burada yukarıda oluşturduğumuz themeExtension’ı kullanacağız.

ThemeExtension’a şu şekilde ulaşıyoruz:

CardTheme cardTheme = Theme.of(context).extension<CardTheme>()!;

Şimdi bunu kart tasarımında kullanalım:

5. HomePage Widgetının Oluşturulması

Öncelikle HomePage widgetının constructor’ına tema değiştirmemize yardımcı olarak fonksiyonu ekleyelim:

İkinci olarak Appbar ekleyelim ve tema değiştirmemize yardımcı olacak olan switch butonunu bu appbara ekleyelim:

Kartımızı ekledikten sonra HomePage widgetımızın son hali aşağıdaki gibi olacak:

Bu kadar!!! Artık siz de ThemeExtension kullanarak temanızı daha da geliştirebilirsiniz. Kodun tamamına buradan ulaşabilirsiniz.

Çıktı:

Theme extension testi

Sonuç:

ThemeExtension kullanımı işimizi kolaylaştırmak için oldukça önemli. Vakit kaybetmeden daha efektif temalar için bu özelliği kullanmaya başlamamız gerekiyor :)

Herkese keyifli Flutter’li haftalar dilerim :)

Referanslar:

ThemeExtension class - material library - Dart API