close

Formatiranje korisničkog sučelja s ThemeData i Custom Styles in Flutter

U Flutter, možete oblikovati izgled i dojam svoje aplikacije koristeći ThemeData i prilagoditi styles. ThemeData je klasa koja sadrži svojstva za definiranje dominantne boje styles, fontova, padding itd. za cijelu aplikaciju. Prilagođeni stil omogućuje prilagodbu styles za svaki pojedini Widget. Evo detaljnih uputa o korištenju ThemeData i prilagođenom Styles u Flutter:

ThemeData

U Flutter, ThemeData je klasa koja sadrži atribute za definiranje primarne boje, obitelji fontova padding i mnoge druge opcije stila za cijelu aplikaciju. Korištenjem ThemeData možete brzo promijeniti cjelokupni izgled svoje aplikacije bez potrebe da mijenjate svaku pojedinačnu Widget.

Uobičajeni atributi ThemeData:

  • primaryColor: Primarna boja za glavne elemente aplikacije, kao što su traka aplikacije, gumbi itd.
  • accentColor: Boja naglaska za sekundarne elemente ili istaknute elemente u korisničkom sučelju, kao što je FloatingActionButton.
  • backgroundColor: Boja pozadine za cijelu aplikaciju.
  • textTheme: Definira primarni tekst styles za različite elemente teksta u aplikaciji, kao što su naslovi, tekst tijela itd.
  • textTheme.headline1: Stil teksta za razinu naslova 1.
  • textTheme.headline2: Stil teksta za razinu naslova 2.
  • textTheme.bodyText1: Stil teksta za glavni tekst.
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(),  
)

 

Prilagođeni stil

Prilagođeno Styles vam omogućuje da prilagodite stil za svaki pojedini Widget. Korištenjem style atributa Widgeta kao što su Text, Container, RaisedButton, itd., možete promijeniti font, boju, veličinu teksta, padding i razne druge atribute.

Uobičajeni atributi TextStyle(koristi se za Text Widget):

  • fontSize: Veličina fonta.
  • fontWeight: Težina fonta.
  • color: Boja teksta.
  • fontStyle: Stil fonta, kao što je podebljano, kurziv.
  • letterSpacing: Razmak između znakova.
  • wordSpacing: Razmak između riječi.
  • decoration: Dekoracija teksta, kao što je podcrtano, precrtano.

Primjer korištenja 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)),  
)

 

Korištenje Themes i Styles sa MediaQuery

Možete kombinirati Themes i Styles prilagoditi MediaQuery korisničko sučelje na temelju veličine zaslona ili rezolucije uređaja.

Primjer:

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čak:

Flutter pruža moćne alate za formatiranje korisničkog sučelja vaše aplikacije. Korištenjem ThemeData i prilagodbom Styles možete jednostavno prilagoditi elemente korisničkog sučelja kao što su boje, fontovi, veličine teksta itd. kako biste stvorili lijepo i privlačno sučelje za svoju aplikaciju.