close

Formatering af UI med ThemeData og Custom Styles in Flutter

I Flutter kan du formatere udseendet og følelsen af ​​din applikation ved at bruge ThemeData og tilpasse styles. ThemeData er en klasse, der indeholder egenskaber til at definere den dominerende farve styles, skrifttyper padding osv. for hele applikationen. Custom Style giver dig mulighed for at tilpasse styles til hver specifik Widget. Her er detaljerede instruktioner om, hvordan du bruger ThemeData og brugerdefineret Styles i Flutter:

ThemeData

I Flutter, ThemeData er en klasse, der indeholder attributter til at definere den primære farve, skrifttypefamilie, padding og mange andre stilindstillinger for hele applikationen. Ved at bruge ThemeData kan du hurtigt ændre det overordnede udseende af din app uden at skulle ændre hver enkelt Widget.

Fælles attributter for ThemeData:

  • primaryColor: Den primære farve for appens hovedelementer, såsom app-bjælken, knapper osv.
  • accentColor: Accentfarven for sekundære elementer eller højlys i brugergrænsefladen, såsom FloatingActionButton.
  • backgroundColor: Baggrundsfarven for hele appen.
  • textTheme: Definerer den primære tekst styles for forskellige tekstelementer i appen, såsom overskrifter, brødtekst osv.
  • textTheme.headline1: Tekststil for overskriftsniveau 1.
  • textTheme.headline2: Tekststil for overskriftsniveau 2.
  • textTheme.bodyText1: Tekststil for hovedteksten.
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(),  
)

 

Brugerdefineret stil

Brugerdefineret Styles giver dig mulighed for at tilpasse stilen til hver specifik Widget. Ved at bruge style attributten til widgets som Tekst, Container, RaisedButton osv., kan du ændre skrifttype, farve, tekststørrelse, padding og forskellige andre attributter.

Almindelige attributter for TextStyle(bruges til tekstwidget):

  • fontSize: Skriftstørrelsen.
  • fontWeight: Skrifttypevægten.
  • color: Tekstfarven.
  • fontStyle: Skrifttypestilen, såsom fed, kursiv.
  • letterSpacing: Afstanden mellem tegn.
  • wordSpacing: Afstanden mellem ord.
  • decoration: Tekstdekorationen, såsom understregning, gennemstreget.

Eksempel ved brug af brugerdefineret 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)),  
)

 

Brug Themes og Styles med MediaQuery

Du kan kombinere Themes og Styles med MediaQuery for at justere brugergrænsefladen baseret på skærmstørrelsen eller enhedsopløsningen.

Eksempel:

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

 

Konklusion:

Flutter giver kraftfulde værktøjer til at formatere din applikations brugergrænseflade. Ved at bruge ThemeData og tilpasse Styles, kan du nemt justere UI-elementer såsom farver, skrifttyper, tekststørrelser osv. for at skabe en smuk og engagerende grænseflade til din app.