close

Formatarea interfeței de utilizare cu ThemeData și Personalizat Styles în Flutter

În Flutter, puteți formata aspectul aplicației dvs. folosind ThemeData și personaliza styles. ThemeData este o clasă care conține proprietăți pentru a defini culoarea dominantă styles, fonturile, padding etc. pentru întreaga aplicație. Stilul personalizat vă permite să personalizați styles pentru fiecare în parte Widget. Iată instrucțiuni detaliate despre modul de utilizare ThemeData și personalizare Styles în Flutter:

ThemeData

În Flutter, ThemeData este o clasă care conține atribute pentru a defini culoarea primară, familia de fonturi padding și multe alte opțiuni de stil pentru întreaga aplicație. Utilizând ThemeData, puteți schimba rapid aspectul general al aplicației dvs. fără a fi nevoie să modificați fiecare individ Widget.

Atributele comune ale ThemeData:

  • primaryColor: Culoarea principală pentru elementele principale ale aplicației, cum ar fi bara aplicației, butoanele etc.
  • accentColor: Culoarea de accent pentru elementele secundare sau evidențierea din interfața de utilizare, cum ar fi FloatingActionButton.
  • backgroundColor: Culoarea de fundal pentru întreaga aplicație.
  • textTheme: definește textul principal styles pentru diferite elemente de text din aplicație, cum ar fi titluri, textul corpului etc.
  • textTheme.headline1: stil de text pentru titlul nivelul 1.
  • textTheme.headline2: stil text pentru titlul nivelul 2.
  • textTheme.bodyText1: stilul textului pentru corpul principal al textului.
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(),  
)

 

Stil personalizat

Personalizat Styles vă permite să personalizați stilul pentru fiecare în parte Widget. Folosind style atributul widget-urilor precum Text, Container, RaisedButton etc., puteți modifica fontul, culoarea, dimensiunea textului padding și diverse alte atribute.

Atribute comune ale TextStyle(utilizate pentru Text Widget):

  • fontSize: Dimensiunea fontului.
  • fontWeight: Greutatea fontului.
  • color: Culoarea textului.
  • fontStyle: stilul fontului, cum ar fi bold, italic.
  • letterSpacing: Spațierea dintre caractere.
  • wordSpacing: Spațierea dintre cuvinte.
  • decoration: Decorarea textului, cum ar fi sublinierea, barajul.

Exemplu folosind Personalizat 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)),  
)

 

Folosind Themes și Styles cu MediaQuery

Puteți combina Themes și Styles cu MediaQuery pentru a ajusta interfața de utilizare în funcție de dimensiunea ecranului sau rezoluția dispozitivului.

Exemplu:

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

 

Concluzie:

Flutter oferă instrumente puternice pentru a formata interfața de utilizare a aplicației dvs. Prin utilizarea ThemeData și personalizarea Styles, puteți ajusta cu ușurință elementele UI, cum ar fi culorile, fonturile, dimensiunile textului etc., pentru a crea o interfață frumoasă și captivantă pentru aplicația dvs.