close

Kuumbiza UI kwa kutumia ThemeData na Kubinafsisha Styles ndani Flutter

Katika Flutter, unaweza kufomati mwonekano na hisia ya programu yako kwa kutumia ThemeData na kubinafsisha styles. ThemeData ni darasa ambalo lina sifa za kufafanua rangi kuu styles, fonti, padding, n.k. kwa programu nzima. Mtindo Maalum hukuruhusu kubinafsisha styles kwa kila mahususi Widget. Hapa kuna maagizo ya kina juu ya jinsi ya kutumia ThemeData na Maalum Styles katika Flutter:

ThemeData

In Flutter, ThemeData ni darasa ambalo lina sifa za kufafanua rangi ya msingi, familia ya fonti, padding, na chaguzi zingine nyingi za mitindo kwa programu nzima. Kwa kutumia ThemeData, unaweza kubadilisha haraka mwonekano wa jumla wa programu yako bila kulazimika kurekebisha kila moja Widget.

Sifa za kawaida za ThemeData:

  • primaryColor: Rangi msingi ya vipengele vikuu vya programu, kama vile upau wa programu, vitufe, n.k.
  • accentColor: Rangi ya lafudhi ya vipengee vya pili au vivutio katika UI, kama vile FloatingActionButton.
  • backgroundColor: Rangi ya usuli kwa programu nzima.
  • textTheme: Inafafanua maandishi ya msingi styles kwa vipengele tofauti vya maandishi katika programu, kama vile vichwa, maandishi ya mwili, n.k.
  • textTheme.headline1: Mtindo wa maandishi kwa kiwango cha 1 cha kichwa.
  • textTheme.headline2: Mtindo wa maandishi kwa kiwango cha 2 cha mada.
  • textTheme.bodyText1: Mtindo wa maandishi kwa matini kuu ya mwili.
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(),  
)

 

Mtindo Maalum

Maalum Styles hukuruhusu kubinafsisha mtindo kwa kila mahususi Widget. Kwa kutumia style sifa ya Wijeti kama vile Maandishi, Kontena, Kitufe kilichoimarishwa, n.k., unaweza kubadilisha fonti, rangi, saizi ya maandishi, padding na sifa zingine mbalimbali.

Sifa za kawaida za TextStyle(hutumika kwa Wijeti ya Maandishi):

  • fontSize: Saizi ya fonti.
  • fontWeight: Uzito wa fonti.
  • color: Rangi ya maandishi.
  • fontStyle: Mtindo wa fonti, kama vile herufi nzito, italiki.
  • letterSpacing: Nafasi kati ya wahusika.
  • wordSpacing: Nafasi kati ya maneno.
  • decoration: Mapambo ya maandishi, kama vile kupigia mstari, kupitisha.

Mfano kwa kutumia 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)),  
)

 

Kutumia Themes na Styles _ MediaQuery

Unaweza kuchanganya Themes na Styles kurekebisha MediaQuery UI kulingana na ukubwa wa skrini au ubora wa kifaa.

Mfano:

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

 

Hitimisho:

Flutter hutoa zana madhubuti za kuumbiza UI ya programu yako. Kwa kutumia ThemeData na kubinafsisha Styles, unaweza kurekebisha vipengele vya UI kwa urahisi kama vile rangi, fonti, ukubwa wa maandishi, n.k., ili kuunda kiolesura kizuri na cha kuvutia cha programu yako.