close

Formatering av brukergrensesnitt med ThemeData og tilpasset Styles inn Flutter

I Flutter kan du formatere utseendet og følelsen til applikasjonen din ved å bruke ThemeData og tilpasse styles. ThemeData er en klasse som inneholder egenskaper for å definere den dominerende fargen styles, fonter padding osv. for hele applikasjonen. Egendefinert stil lar deg tilpasse styles for hver spesifikke Widget. Her er detaljerte instruksjoner om hvordan du bruker ThemeData og tilpasset Styles i Flutter:

ThemeData

I Flutter, ThemeData er en klasse som inneholder attributter for å definere primærfargen, skriftfamilien, padding og mange andre stilalternativer for hele applikasjonen. Ved å bruke ThemeData kan du raskt endre det generelle utseendet til appen din uten å måtte endre hver enkelt Widget.

Vanlige attributter for ThemeData:

  • primaryColor: Hovedfargen for hovedelementene i appen, for eksempel applinjen, knapper osv.
  • accentColor: Aksentfargen for sekundære elementer eller høydepunkter i brukergrensesnittet, for eksempel FloatingActionButton.
  • backgroundColor: Bakgrunnsfargen for hele appen.
  • textTheme: Definerer primærteksten styles for forskjellige tekstelementer i appen, for eksempel overskrifter, brødtekst osv.
  • textTheme.headline1: Tekststil for overskriftsnivå 1.
  • textTheme.headline2: Tekststil for overskriftsnivå 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(),  
)

 

Egendefinert stil

Tilpasset Styles lar deg tilpasse stilen for hver spesifikke Widget. Ved å bruke style attributtet til widgets som Tekst, Container, RaisedButton, etc., kan du endre skrifttype, farge, tekststørrelse, padding og forskjellige andre attributter.

Vanlige attributter for TextStyle(brukt for tekstwidget):

  • fontSize: Skriftstørrelsen.
  • fontWeight: Skriftvekten.
  • color: Tekstfargen.
  • fontStyle: Skriftstilen, for eksempel fet skrift, kursiv.
  • letterSpacing: Avstanden mellom tegn.
  • wordSpacing: Avstanden mellom ord.
  • decoration: Tekstdekorasjonen, som understreking, gjennomstreking.

Eksempel ved bruk av egendefinert 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)),  
)

 

Bruker Themes og Styles med MediaQuery

Du kan kombinere Themes og Styles med MediaQuery for å justere brukergrensesnittet basert på skjermstørrelsen eller enhetsopplø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'),  
)

 

Konklusjon:

Flutter gir kraftige verktøy for å formatere brukergrensesnittet til applikasjonen din. Ved å bruke ThemeData og tilpasse Styles, kan du enkelt justere UI-elementer som farger, fonter, tekststørrelser osv. for å lage et vakkert og engasjerende grensesnitt for appen din.