Flutter Stil ve Temalar

Theme widget', uygulamanzda renkler, yaz tipi stilleri, buton stilleri gibi birok varsaylan stili ayarlamanza olanak tanr.
Bu blmde, Flutter'daki dier nemli stil paralarnn yan sra Temann nasl kullanlacana bakacaz: media query, yaz tipleri, animasyonlar ve Flutter'n Color class'.

Theme widget

Theme widget', baz durumlarda uygulamanzn tamamna otomatik olarak uygulanacak stilleri bildirmenizi salar. Stillerinizin uygulanmad veya geersiz klnmas gerektii durumlarda, Tema widget aracna widget esi aacnzn herhangi bir yerinden eriebilirsiniz.

Temanzn kontrol edebilecei renkle ilgili birok stil hakknda size fikir vermesi iin, widget'ta ayarlayabileceiniz ve uygulamann tamamna nfuz edecek zelliklerin bazlar (not: bu zellikler, uygulamanzdaki tm widget'lar etkiler):

brightness (karanlk veya ak bir tema)
primarySwatch
primaryColor

Belirli zellikleri kontrol eden baz zellikler:

canvasColor
scaffoldBackgroundColor
dividerColor
cardColor
buttonColor
errorColor

Bunlar renkler iin mevcut olan yaklak 20 argumandan yalnzca 6 tanesidir. Yaz tipleri sayfa animasyonlar, icon stilleri ve daha fazlas iin Thema'ya iletilebilecek neredeyse 20 arguman daha vardr.

Theme.primaryColor, uygulamanzdaki hemen hemen tm widget'lar etkiler: tm widget'larn rengini istediiniz renkle deitirir.

Uygulamanzda temalar kullanma

Bir temay yaplandrmak iin kullandnz snfa ThemeData ad verilir. Uygulamanza bir tema eklemek iin MaterialApp.theme zelliine bir ThemeData nesnesi iletirsiniz. Ayrca kendi Thema widget aracnz oluturabilir ve ona bir ThemeData nesnesi iletebilirsiniz. Thema sadece bir widget'tr, yani onu herhangi bir widget' kullanabileceiniz her yerde kullanabilirsiniz!

final theme = ThemeData(  fontFamily: "Cabin",  primaryColor: AppColor.midnightSky,  primaryTextTheme:      Theme.of(context).textTheme.apply(        bodyColor: AppColor.textColorDark,        displayColor: AppColor.textColorDark,      ),  textTheme: Theme.of(context).textTheme.apply(        bodyColor: AppColor.textColorDark,        displayColor: AppColor.textColorDark,      ),);

ThemeData'y kullanabileceiniz dier durum, bir stil zelliini aka ayarlamak istediiniz zamandr. rnein, bir container'n background'n temann primaryColor rengi olacak ekilde ayarlamak isteyebilirsiniz.BuildContext sayesinde uygulamanzn herhangi bir yerinde bu tema verilerini alabilirsiniz (BuildContext bir widget'n widget aacndaki yeri hakknda bilgi salar).

MediaQuery ve yntemi

Benim gibi web gelitirme alanndan geldiyseniz, Flutter'daki yaz stillerini bata spacing ve layout olmak zere garip bulabilirsiniz. Web'de CSS kullanrsnz; ve CSS'de, boyutlandrmann devreye girdii her yerde kullanabileceiniz birok farkl l birimi vardr. Standart piksele ek olarak, enin kaplayabilecei alan yzdesine dayal lm birimlerinin yan sra viewport'un boyutuna dayal bir lm birimi de vardr.

Flutter'da yalnzca bir l birimi vardr: logical (mantksal) piksel. Sonu olarak, ou yerleim ve boyutlandrma problemi matematikle zlr ve bu matematiin ou ekran boyutuna dayanr.rnein, bir widget'n ekrann geniliinin te biri olmasn isteyebilirsiniz. Yzde l birimi olmadndan, MediaQuery widget'n kullanarak ekran boyutunu programl olarak almanz gerekir.

MediaQuery, uygulamann herhangi bir yerinde ona erimek iin BuildContext'i kullanabileceiniz Thema'ya benzer bir widget esidir. Bu MediaQuery snfnn of methoduyla yaplr. of methodu aac arar, en yakn MediaQuery snfn bulur ve uygulamanzn herhangi bir yerinde o MediaQuery rneine bir referans verir.

MediaQuery snf, uygulamanzn ilendii ekrann tamamnn boyut bilgisini almak iin harikadr. Bu bilgilere, aygtn genilii ve ykseklii ile bir Size nesnesi dndren MediaQuery.of(context).size statik methodunu ararak eriebilirsiniz.

rnein, telefonun geniliinin %80'ini elde etmek iin unu yazabilirsiniz:

final width = MediaQuery.of(context).size.width * 0.8;

Bir widget'n build context'i , Flutter'a bu widget'n aataki yerine bir referans verir.

Uygulamanzn zerinde alt fiziksel cihaz hakknda belirli bilgiler almaya alyorsanz, bakmanz gereken ilk yer MediaQuery'dir.

Telefonun u anda dikey ya da yatay olduu bilgisi.
Eriilebilirlik nedenleriyle animasyonlar devre d brakmak ve renkleri deitirmek.
Telefona, kullancnn metin boyutu faktrnn bytlm olup olmadn sormak.
Tm uygulama iin padding'i ayarlamak.

ScreenAwareSize method

return Scaffold(  appBar: PreferredSize(    preferredSize: Size.fromHeight(ui.appBarHeight(context)),    child: ...    ),  ),

Size.fromHeight methodu, verilen height ve infinite (sonsuz) width de bir Size nesnesi oluturan Size snf iin bir constructor'dr.

final double kToolbarHeight = 56.0;double appBarHeight(BuildContext context) {  return screenAwareSize(kToolbarHeight, context);}const double kBaseHeight = 1200.0;double screenAwareSize(double size, BuildContext context) {  double drawingHeight = MediaQuery.of(context).size.height        - MediaQuery.of(context).padding.top;  return size * drawingHeight / kBaseHeight;}

MediaQuery.of(context).size, ekran boyutunu temsil eden bir boyut dndrr. MediaQuery.of(context).padding, uygulamann kendisi iin padding ayrntlarn veren bir Padding dndrr; yani, cihaz ekrannn kenar ile st dzey widget esi arasndaki dolguyu.

Bu methodlarn amac, PreferredSize widget arac iin doru boyutlandrmay salamak (ve MediaQuery snfn alrken grmek) App bar'n yksekliini herhangi bir ekranda uygun boyutuna elemektir. Yani, "ortalama" ekran 1.200 piksel yksekliindeyse ve bu ekranda app bar 56 piksel yksekliindeyse, bu fonksiyonlar herhangi bir ekran boyutunda app bar iin edeer ykseklii verir.

return Scaffold(  appBar: PreferredSize(    preferredSize: Size.fromHeight(ui.appBarHeight(context)),    child: ...    ),  ),

Resource: Flutter in Action chapter-4