DEV Community

Cover image for Flutter Stil ve Temalar ­čĺź ­čîî ÔťĘ
G├╝lsen Keskin
G├╝lsen Keskin

Posted on

 

Flutter Stil ve Temalar ­čĺź ­čîî ÔťĘ

Theme widget'─▒, uygulaman─▒zda renkler, yaz─▒ tipi stilleri, buton stilleri gibi bir├žok varsay─▒lan stili ayarlaman─▒za olanak tan─▒r.
Bu b├Âl├╝mde, Flutter'daki di─čer ├Ânemli stil par├žalar─▒n─▒n yan─▒ s─▒ra Teman─▒n nas─▒l kullan─▒laca─č─▒na bakaca─č─▒z: media query, yaz─▒ tipleri, animasyonlar ve Flutter'─▒n Color class'─▒.

Theme widget

Theme widget'─▒, baz─▒ durumlarda uygulaman─▒z─▒n tamam─▒na otomatik olarak uygulanacak stilleri bildirmenizi sa─člar. Stillerinizin uygulanmad─▒─č─▒ veya ge├žersiz k─▒l─▒nmas─▒ gerekti─či durumlarda, Tema widget arac─▒na widget ├Â─česi a─čac─▒n─▒z─▒n herhangi bir yerinden eri┼čebilirsiniz.

Teman─▒z─▒n kontrol edebilece─či renkle ilgili bir├žok stil hakk─▒nda size fikir vermesi i├žin, widget'ta ayarlayabilece─činiz ve uygulaman─▒n tamam─▒na n├╝fuz edecek ├Âzelliklerin baz─▒lar─▒ (not: bu ├Âzellikler, uygulaman─▒zdaki t├╝m widget'lar─▒ etkiler):

ÔÇó brightness (karanl─▒k veya a├ž─▒k bir tema)
ÔÇó primarySwatch
ÔÇó primaryColor

Belirli ├Âzellikleri kontrol eden baz─▒ ├Âzellikler:

ÔÇó canvasColor
ÔÇó scaffoldBackgroundColor
ÔÇó dividerColor
ÔÇó cardColor
ÔÇó buttonColor
ÔÇó errorColor

Bunlar renkler i├žin mevcut olan yakla┼č─▒k 20 argumandan yaln─▒zca 6 tanesidir. Yaz─▒ tipleri sayfa animasyonlar─▒, icon stilleri ve daha fazlas─▒ i├žin Thema'ya iletilebilecek neredeyse 20 arguman daha vard─▒r.

Theme.primaryColor, uygulaman─▒zdaki hemen hemen t├╝m widget'lar─▒ etkiler: t├╝m widget'lar─▒n rengini istedi─činiz renkle de─či┼čtirir.

Uygulaman─▒zda temalar─▒ kullanma

Bir temay─▒ yap─▒land─▒rmak i├žin kulland─▒─č─▒n─▒z s─▒n─▒fa ThemeData ad─▒ verilir. Uygulaman─▒za bir tema eklemek i├žin MaterialApp.theme ├Âzelli─čine bir ThemeData nesnesi iletirsiniz. Ayr─▒ca kendi Thema widget arac─▒n─▒z─▒ olu┼čturabilir ve ona bir ThemeData nesnesi iletebilirsiniz. Thema sadece bir widget't─▒r, yani onu herhangi bir widget'─▒ kullanabilece─činiz 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,
      ),
);
Enter fullscreen mode Exit fullscreen mode

ThemeData'y─▒ kullanabilece─činiz di─čer durum, bir stil ├Âzelli─čini a├ž─▒k├ža ayarlamak istedi─činiz zamand─▒r. ├ľrne─čin, bir container'─▒n background'─▒n─▒ teman─▒n primaryColor rengi olacak ┼čekilde ayarlamak isteyebilirsiniz.BuildContext sayesinde uygulaman─▒z─▒n herhangi bir yerinde bu tema verilerini alabilirsiniz (BuildContext bir widget'─▒n widget a─čac─▒ndaki yeri hakk─▒nda bilgi sa─člar).

MediaQuery ve y├Ântemi

Benim gibi web geli┼čtirme alan─▒ndan geldiyseniz, Flutter'daki yaz─▒ stillerini ba┼čta spacing ve layout olmak ├╝zere garip bulabilirsiniz. Web'de CSS kullan─▒rs─▒n─▒z; ve CSS'de, boyutland─▒rman─▒n devreye girdi─či her yerde kullanabilece─činiz bir├žok farkl─▒ ├Âl├ž├╝ birimi vard─▒r. Standart piksele ek olarak, ├Â─čenin kaplayabilece─či alan y├╝zdesine dayal─▒ ├Âl├ž├╝m birimlerinin yan─▒ s─▒ra viewport'un boyutuna dayal─▒ bir ├Âl├ž├╝m birimi de vard─▒r.

Flutter'da yaln─▒zca bir ├Âl├ž├╝ birimi vard─▒r: logical (mant─▒ksal) piksel. Sonu├ž olarak, ├žo─ču yerle┼čim ve boyutland─▒rma problemi matematikle ├ž├Âz├╝l├╝r ve bu matemati─čin ├žo─ču ekran boyutuna dayan─▒r.├ľrne─čin, bir widget'─▒n ekran─▒n geni┼čli─činin ├╝├žte biri olmas─▒n─▒ isteyebilirsiniz. Y├╝zde ├Âl├ž├╝ birimi olmad─▒─č─▒ndan, MediaQuery widget'─▒n─▒ kullanarak ekran boyutunu programl─▒ olarak alman─▒z gerekir.

MediaQuery, uygulaman─▒n herhangi bir yerinde ona eri┼čmek i├žin BuildContext'i kullanabilece─činiz Thema'ya benzer bir widget ├Â─česidir. Bu MediaQuery s─▒n─▒f─▒n─▒n of methoduyla yap─▒l─▒r. of methodu a─čac─▒ arar, en yak─▒n MediaQuery s─▒n─▒f─▒n─▒ bulur ve uygulaman─▒z─▒n herhangi bir yerinde o MediaQuery ├Ârne─čine bir referans verir.

MediaQuery s─▒n─▒f─▒, uygulaman─▒z─▒n i┼člendi─či ekran─▒n tamam─▒n─▒n boyut bilgisini almak i├žin harikad─▒r. Bu bilgilere, ayg─▒t─▒n geni┼čli─či ve y├╝ksekli─či ile bir Size nesnesi d├Ând├╝ren MediaQuery.of(context).size statik methodunu ├ža─č─▒rarak eri┼čebilirsiniz.

├ľrne─čin, telefonun geni┼čli─činin %80'ini elde etmek i├žin ┼čunu yazabilirsiniz:

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

Bir widget'─▒n build context'i , Flutter'a bu widget'─▒n a─ča├žtaki yerine bir referans verir.

Uygulaman─▒z─▒n ├╝zerinde ├žal─▒┼čt─▒─č─▒ fiziksel cihaz hakk─▒nda belirli bilgiler almaya ├žal─▒┼č─▒yorsan─▒z, bakman─▒z gereken ilk yer MediaQuery'dir.

ÔÇó Telefonun ┼ču anda dikey ya da yatay oldu─ču bilgisi.
ÔÇó Eri┼čilebilirlik nedenleriyle animasyonlar─▒ devre d─▒┼č─▒ b─▒rakmak ve renkleri de─či┼čtirmek.
ÔÇó Telefona, kullan─▒c─▒n─▒n metin boyutu fakt├Âr├╝n├╝n b├╝y├╝t├╝lm├╝┼č olup olmad─▒─č─▒n─▒ sormak.
ÔÇó T├╝m uygulama i├žin padding'i ayarlamak.

ScreenAwareSize method

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

Size.fromHeight methodu, verilen height ve infinite (sonsuz) width de bir Size nesnesi olu┼čturan Size s─▒n─▒f─▒ i├žin bir constructor'd─▒r.

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;
}
Enter fullscreen mode Exit fullscreen mode

MediaQuery.of(context).size, ekran boyutunu temsil eden bir boyut d├Ând├╝r├╝r. MediaQuery.of(context).padding, uygulaman─▒n kendisi i├žin padding ayr─▒nt─▒lar─▒n─▒ veren bir Padding d├Ând├╝r├╝r; yani, cihaz ekran─▒n─▒n kenar─▒ ile ├╝st d├╝zey widget ├Â─česi aras─▒ndaki dolguyu.

Bu methodlar─▒n amac─▒, PreferredSize widget arac─▒ i├žin do─čru boyutland─▒rmay─▒ sa─člamak (ve MediaQuery s─▒n─▒f─▒n─▒ ├žal─▒┼č─▒rken g├Ârmek) App bar'─▒n y├╝ksekli─čini herhangi bir ekranda uygun boyutuna e┼člemektir. Yani, "ortalama" ekran 1.200 piksel y├╝ksekli─čindeyse ve bu ekranda app bar 56 piksel y├╝ksekli─čindeyse, bu fonksiyonlar herhangi bir ekran boyutunda app bar i├žin e┼čde─čer y├╝ksekli─či verir.

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

Resource: Flutter in Action chapter-4 ÔťĘ

Top comments (0)

50 CLI Tools You Can't Live Without

>> Check out this classic DEV post <<