close

Formatimi i UI me ThemeData dhe personalizuar Styles në Flutter

Në Flutter, ju mund të formatoni pamjen dhe ndjesinë e aplikacionit tuaj duke përdorur ThemeData dhe personalizoni styles. ThemeData është një klasë që përmban veti për të përcaktuar ngjyrën dominuese styles, fontet, padding etj. për të gjithë aplikacionin. Stili i personalizuar ju lejon të personalizoni styles për secilin specifik Widget. Këtu janë udhëzime të hollësishme se si të përdorni ThemeData dhe të personalizoni Styles në Flutter:

ThemeData

In Flutter, ThemeData është një klasë që përmban atribute për të përcaktuar ngjyrën kryesore, familjen e shkronjave, padding dhe shumë opsione të tjera stilimi për të gjithë aplikacionin. Duke përdorur ThemeData, ju mund të ndryshoni shpejt pamjen e përgjithshme të aplikacionit tuaj pa pasur nevojë të modifikoni çdo individ Widget.

Atributet e zakonshme të ThemeData:

  • primaryColor: Ngjyra kryesore për elementët kryesorë të aplikacionit, si shiriti i aplikacionit, butonat, etj.
  • accentColor: Ngjyra e theksit për elementët dytësorë ose pikat kryesore në ndërfaqen e përdoruesit, si p.sh. FloatingActionButton.
  • backgroundColor: Ngjyra e sfondit për të gjithë aplikacionin.
  • textTheme: Përcakton tekstin kryesor styles për elementë të ndryshëm të tekstit në aplikacion, si titujt, tekstin e trupit, etj.
  • textTheme.headline1: Stili i tekstit për nivelin e titullit 1.
  • textTheme.headline2: Stili i tekstit për nivelin 2 të titullit.
  • textTheme.bodyText1: Stili i tekstit për tekstin kryesor.
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(),  
)

 

Stili i personalizuar

Custom Styles ju lejon të personalizoni stilin për secilin specifik Widget. Duke përdorur style atributin e miniaplikacioneve si Text, Container, RaisedButton, etj., mund të ndryshoni fontin, ngjyrën, madhësinë e tekstit, padding dhe atribute të tjera të ndryshme.

Atributet e zakonshme të TextStyle(përdoret për miniaplikacionin e tekstit):

  • fontSize: Madhësia e shkronjave.
  • fontWeight: Pesha e shkronjave.
  • color: Ngjyra e tekstit.
  • fontStyle: Stili i shkronjave, të tilla si bold, italic.
  • letterSpacing: Hapësira ndërmjet personazheve.
  • wordSpacing: Hapësira ndërmjet fjalëve.
  • decoration: Dekorimi i tekstit, si p.sh. nënvizimi, gërmimi.

Shembull duke përdorur 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)),  
)

 

Duke përdorur Themes dhe Styles me MediaQuery

Mund të kombinoni Themes dhe Styles me MediaQuery për të rregulluar ndërfaqen e përdoruesit bazuar në madhësinë e ekranit ose rezolucionin e pajisjes.

Shembull:

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

 

konkluzioni:

Flutter ofron mjete të fuqishme për të formatuar ndërfaqen e përdoruesit të aplikacionit tuaj. Duke përdorur ThemeData dhe personalizuar Styles, ju mund të rregulloni lehtësisht elementët e ndërfaqes së përdoruesit si ngjyrat, fontet, madhësitë e tekstit, etj., për të krijuar një ndërfaqe të bukur dhe tërheqëse për aplikacionin tuaj.