This content originally appeared on DEV Community and was authored by Gülsen 🦋
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,
),
);
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: ...
),
),
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;
}
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: ...
),
),
Resource: Flutter in Action chapter-4 ✨
This content originally appeared on DEV Community and was authored by Gülsen 🦋
Gülsen 🦋 | Sciencx (2022-03-26T22:39:01+00:00) Flutter Stil ve Temalar 💫 🌌 ✨. Retrieved from https://www.scien.cx/2022/03/26/flutter-stil-ve-temalar-%f0%9f%92%ab-%f0%9f%8c%8c-%e2%9c%a8/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.