close

Formatera UI med ThemeData och anpassad Styles in Flutter

I Flutter kan du formatera utseendet och känslan för din applikation med ThemeData och anpassa styles. ThemeData är en klass som innehåller egenskaper för att definiera den dominerande färgen styles, typsnitt, padding etc. för hela applikationen. Custom Style låter dig anpassa styles för varje specifik Widget. Här är detaljerade instruktioner om hur du använder ThemeData och anpassar Styles i Flutter:

ThemeData

I Flutter, ThemeData är en klass som innehåller attribut för att definiera primärfärgen, teckensnittsfamiljen, padding och många andra stilalternativ för hela applikationen. Genom att använda ThemeData kan du snabbt ändra det övergripande utseendet på din app utan att behöva ändra varje individ Widget.

Vanliga attribut för ThemeData:

  • primaryColor: Den primära färgen för huvudelementen i appen, som appfältet, knappar etc.
  • accentColor: Accentfärgen för sekundära element eller högdagrar i användargränssnittet, som FloatingActionButton.
  • backgroundColor: Bakgrundsfärgen för hela appen.
  • textTheme: Definierar den primära texten styles för olika textelement i appen, såsom rubriker, brödtext, etc.
  • textTheme.headline1: Textstil för rubriknivå 1.
  • textTheme.headline2: Textstil för rubriknivå 2.
  • textTheme.bodyText1: Textstil för huvudtexten.
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(),  
)

 

Anpassad stil

Custom Styles låter dig anpassa stilen för varje specifik Widget. Genom att använda style attributen för widgets som Text, Container, RaisedButton, etc., kan du ändra teckensnitt, färg, textstorlek, padding och olika andra attribut.

Vanliga attribut för TextStyle(används för Text Widget):

  • fontSize: Teckenstorleken.
  • fontWeight: Teckensnittets vikt.
  • color: Textfärgen.
  • fontStyle: Teckensnittsstilen, som fetstil, kursiv.
  • letterSpacing: Avståndet mellan tecken.
  • wordSpacing: Avståndet mellan orden.
  • decoration: Textdekorationen, såsom understrykning, genomstruken.

Exempel med 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)),  
)

 

Använda Themes och Styles med MediaQuery

Du kan kombinera Themes och Styles med MediaQuery för att justera användargränssnittet baserat på skärmstorleken eller enhetens upplösning.

Exempel:

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

 

Slutsats:

Flutter ger kraftfulla verktyg för att formatera gränssnittet för din applikation. Genom att använda ThemeData och anpassa Styles, kan du enkelt justera UI-element som färger, teckensnitt, textstorlekar etc. för att skapa ett vackert och engagerande gränssnitt för din app.