close

Tsara UI tare ThemeData da Custom Styles in Flutter

A cikin Flutter, zaku iya tsara kamanni da jin daɗin aikace-aikacenku ta amfani ThemeData da keɓance styles. ThemeData aji ne wanda ke ƙunshe da kaddarorin don ayyana rinjayen launi styles, fonts, padding, da sauransu don ɗaukacin aikace-aikacen. Salon Custom yana ba ku damar keɓancewa styles ga kowane takamaiman Widget. Anan akwai cikakkun bayanai kan yadda ake amfani ThemeData da kuma Custom Styles a Flutter:

ThemeData

A cikin Flutter, ThemeData aji ne wanda ya ƙunshi sifofi don ayyana launi na farko, dangin font, padding, da sauran zaɓuɓɓukan salo da yawa don aikace-aikacen gabaɗayan. Ta amfani da ThemeData, zaku iya canza kamannin app ɗinku cikin sauri ba tare da canza kowane mutum ba Widget.

Abubuwan gama gari na ThemeData:

  • primaryColor: Launi na farko don manyan abubuwan app, kamar mashaya app, maɓalli, da sauransu.
  • accentColor: Launin lafazi don abubuwa na biyu ko manyan bayanai a cikin UI, kamar FloatingActionButton.
  • backgroundColor: Launin bango don duk app.
  • textTheme: Yana bayyana rubutun farko styles don abubuwan rubutu daban-daban a cikin app, kamar kanun labarai, rubutun jiki, da sauransu.
  • textTheme.headline1: Salon rubutu don mataki na 1.
  • textTheme.headline2: Salon rubutu don mataki na 2.
  • textTheme.bodyText1: Salon rubutu don babban rubutun jiki.
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(),  
)

 

Salon Al'ada

Custom Styles yana ba ku damar tsara salo don kowane takamaiman Widget. Ta amfani da style sifa na Widgets kamar Rubutu, Kwantena, RaisedButton, da sauransu, zaku iya canza font, launi, girman rubutu, padding, da sauran halaye daban-daban.

Abubuwan gama gari na TextStyle(amfani da widget din Rubutu):

  • fontSize: Girman rubutun.
  • fontWeight: Nauyin rubutun.
  • color: Launin rubutu.
  • fontStyle: Salon rubutu, kamar m, rubutun.
  • letterSpacing: Tazara tsakanin haruffa.
  • wordSpacing: Tazarar tsakanin kalmomi.
  • decoration: Adon rubutu, kamar layi, yajin aiki.

Misali ta amfani da Custom 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)),  
)

 

Yin amfani Themes da kuma Styles tare da MediaQuery

Kuna iya haɗawa Themes da Styles tare MediaQuery da daidaita UI dangane da girman allo ko ƙudurin na'ura.

Misali:

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

 

Ƙarshe:

Flutter yana ba da kayan aiki masu ƙarfi don tsara UI na aikace-aikacen ku. Ta amfani ThemeData da keɓancewa Styles, zaku iya daidaita abubuwan UI cikin sauƙi kamar launuka, fonts, girman rubutu, da sauransu, don ƙirƙirar kyakkyawan tsari mai ban sha'awa don app ɗinku.