close

ThemeData UI ile ve Özel Styles olarak biçimlendirme Flutter

içinde Flutter, kullanarak uygulamanızın görünümünü biçimlendirebilir ThemeData ve özelleştirebilirsiniz styles. tüm uygulama için baskın rengi, yazı tiplerini vb. ThemeData tanımlayan özellikler içeren bir sınıftır. Özel Stil, her bir belirli. Burada nasıl kullanılacağına ve Özelleştirmeye ilişkin ayrıntılı talimatlar yer almaktadır: styles padding styles Widget ThemeData Styles Flutter

ThemeData

In Flutter, tüm uygulama için ThemeData birincil rengi, yazı tipi ailesini ve diğer birçok stil seçeneğini tanımlayan öznitelikleri içeren bir sınıftır. padding kullanarak ThemeData, uygulamanızın genel görünümünü, her birini tek tek değiştirmek zorunda kalmadan hızlı bir şekilde değiştirebilirsiniz Widget.

Ortak özellikler ThemeData:

  • primaryColor: Uygulama çubuğu, düğmeler vb. gibi uygulamanın ana öğeleri için birincil renk.
  • accentColor: Kullanıcı arabirimindeki FloatingActionButton gibi ikincil öğeler veya vurgulamalar için vurgu rengi.
  • backgroundColor: Tüm uygulama için arka plan rengi.
  • textTheme styles: Başlıklar, gövde metni vb. gibi uygulamadaki farklı metin öğeleri için birincil metni tanımlar.
  • textTheme.headline1: Başlık düzeyi 1 için metin stili.
  • textTheme.headline2: Başlık düzeyi 2 için metin stili.
  • textTheme.bodyText1: Ana gövde metni için metin stili.
MaterialApp(  
  theme: ThemeData(  
    primaryColor: Colors.blue, // Dominant colors for title bars, buttons, etc.  
    accentColor: Colors.green, // Primary color for secondary elements eg FloatingActionButton  
    fontFamily: 'Roboto', // The main font for the whole application  
    textTheme: TextTheme( // Dominant text styles for in-app texts  
      headline1: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),  
      headline2: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),  
      bodyText1: TextStyle(fontSize: 16),  
   ),  
 ),  
  home: MyHomePage(),  
)

 

Özel Stil

Özel Styles, her belirli Widget. Metin, Kapsayıcı, Yükseltilmiş Düğme vb. Widget'ların niteliklerini kullanarak yazı tipini, rengi, metin boyutunu ve çeşitli diğer nitelikleri style değiştirebilirsiniz. padding

TextStyle'ın ortak özellikleri(Metin Widget'ı için kullanılır):

  • fontSize: Yazı tipi boyutu.
  • fontWeight: Yazı tipi ağırlığı.
  • color: Metin rengi.
  • fontStyle: Kalın, italik gibi yazı tipi stili.
  • letterSpacing: Karakterler arasındaki boşluk.
  • wordSpacing: Kelimeler arasındaki boşluk.
  • decoration: Altı çizili, üstü çizili gibi metin dekorasyonu.

Özel kullanan örnek Styles:

Text(  
  'Chào bạn',  
  style: TextStyle(fontSize: 24, color: Colors.red, fontWeight: FontWeight.bold),  
)  
  
Container(  
  width: 100,  
  height: 100,  
  color: Colors.blue,  
  padding: EdgeInsets.all(8),  
  child: Text('Container', style: TextStyle(fontSize: 18, color: Colors.white)),  
)

 

kullanma Themes ve Styles ile MediaQuery

Kullanıcı arayüzünü ekran boyutuna veya cihaz çözünürlüğüne göre ayarlamak için Themes ve Styles ile birleştirebilirsiniz. MediaQuery

Örnek:

MediaQuery(  
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.5),  
  child: Text('The text will be scaled 1.5 times larger than the default size'),  
)

 

Çözüm:

Flutter uygulamanızın kullanıcı arayüzünü biçimlendirmek için güçlü araçlar sağlar. uygulamasını kullanarak ThemeData ve özelleştirerek Styles, uygulamanız için güzel ve ilgi çekici bir arayüz oluşturmak üzere renkler, yazı tipleri, metin boyutları vb. gibi kullanıcı arabirimi öğelerini kolayca ayarlayabilirsiniz.