close

Oblikovanje uporabniškega vmesnika z in ThemeData po meri Styles Flutter

V Flutter, lahko oblikujete videz in občutek svoje aplikacije z uporabo ThemeData in prilagodite styles. ThemeData je razred, ki vsebuje lastnosti za definiranje prevladujoče barve styles, pisav, padding itd. za celotno aplikacijo. Slog po meri vam omogoča prilagajanje styles za vsakega posebej Widget. Tu so podrobna navodila za uporabo ThemeData in po meri Styles v Flutter:

ThemeData

V je razred, ki vsebuje atribute za definiranje primarne barve, družine pisav Flutter in številnih drugih možnosti oblikovanja za celotno aplikacijo. Z uporabo lahko hitro spremenite celoten videz vaše aplikacije, ne da bi morali spreminjati vsako posamezno. ThemeData padding ThemeData Widget

Pogosti atributi ThemeData:

  • primaryColor: primarna barva za glavne elemente aplikacije, kot so vrstica aplikacij, gumbi itd.
  • accentColor: barva poudarkov za sekundarne elemente ali poudarke v uporabniškem vmesniku, kot je FloatingActionButton.
  • backgroundColor: Barva ozadja za celotno aplikacijo.
  • textTheme: Določa primarno besedilo styles za različne besedilne elemente v aplikaciji, kot so naslovi, telo besedila itd.
  • textTheme.headline1: Slog besedila za 1. raven naslova.
  • textTheme.headline2: slog besedila za 2. raven naslova.
  • textTheme.bodyText1: slog besedila za glavno besedilo.
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(),  
)

 

Slog po meri

Po meri Styles vam omogočajo, da prilagodite slog za vsako posebno Widget. Z uporabo style atributa gradnikov, kot je besedilo, vsebnik, dvignjen gumb itd., lahko spremenite pisavo, barvo, velikost besedila padding in različne druge atribute.

Pogosti atributi TextStyle(uporabljajo se za Text Widget):

  • fontSize: Velikost pisave.
  • fontWeight: Teža pisave.
  • color: barva besedila.
  • fontStyle: slog pisave, na primer krepko, ležeče.
  • letterSpacing: razmik med znaki.
  • wordSpacing: Razmik med besedami.
  • decoration: Okras besedila, kot je podčrtano, prečrtano.

Primer uporabe po meri 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)),  
)

 

Uporaba Themes in Styles z MediaQuery

Lahko kombinirate Themes in Styles prilagodite MediaQuery uporabniški vmesnik glede na velikost zaslona ali ločljivost naprave.

primer:

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

 

Zaključek:

Flutter ponuja zmogljiva orodja za oblikovanje uporabniškega vmesnika vaše aplikacije. Z uporabo ThemeData in prilagajanjem Styles lahko preprosto prilagodite elemente uporabniškega vmesnika, kot so barve, pisave, velikosti besedila itd., da ustvarite čudovit in privlačen vmesnik za vašo aplikacijo.