close

Gebruikersinterface formatteren met ThemeData en Aangepast Styles in Flutter

In Flutter kunt u het uiterlijk van uw toepassing opmaken met behulp ThemeData van de styles. ThemeData is een klasse die eigenschappen bevat om de dominante kleur styles, lettertypen, padding enz. voor de hele toepassing te definiëren. Custom Style stelt u in staat om styles voor elk specifiek Widget. Hier zijn gedetailleerde instructies voor het gebruik van ThemeData en Aangepast Styles in Flutter:

ThemeData

In Flutter is ThemeData een klasse die attributen bevat om de primaire kleur, lettertypefamilie, padding en vele andere stylingopties voor de hele toepassing te definiëren. Door te gebruiken ThemeData, kunt u snel het algehele uiterlijk van uw app wijzigen zonder dat u elk afzonderlijk hoeft aan te passen Widget.

Gemeenschappelijke kenmerken van ThemeData:

  • primaryColor: De primaire kleur voor hoofdelementen van de app, zoals de app-balk, knoppen, enz.
  • accentColor: De accentkleur voor secundaire elementen of markeringen in de gebruikersinterface, zoals FloatingActionButton.
  • backgroundColor: de achtergrondkleur voor de hele app.
  • textTheme: Definieert de primaire tekst styles voor verschillende tekstelementen in de app, zoals koppen, hoofdtekst, enz.
  • textTheme.headline1: Tekststijl voor kopniveau 1.
  • textTheme.headline2: Tekststijl voor kopniveau 2.
  • textTheme.bodyText1: Tekststijl voor de hoofdtekst.
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(),  
)

 

Aangepaste stijl

Met Aangepast Styles kunt u de stijl voor elk specifiek aanpassen Widget. Door het style kenmerk van Widgets zoals Tekst, Container, RaisedButton, enz. te gebruiken, kunt u het lettertype, de kleur, de tekstgrootte, padding en verschillende andere kenmerken wijzigen.

Gemeenschappelijke attributen van TextStyle(gebruikt voor Text Widget):

  • fontSize: De lettergrootte.
  • fontWeight: Het lettertypegewicht.
  • color: De tekstkleur.
  • fontStyle: De lettertypestijl, zoals vet, cursief.
  • letterSpacing: De afstand tussen tekens.
  • wordSpacing: De afstand tussen woorden.
  • decoration: De tekstversiering, zoals onderstrepen, doorhalen.

Voorbeeld met Aangepast 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)),  
)

 

Gebruik Themes en Styles met MediaQuery

U kunt combineren Themes en Styles met MediaQuery om de gebruikersinterface aan te passen op basis van de schermgrootte of apparaatresolutie.

Voorbeeld:

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

 

Conclusie:

Flutter biedt krachtige hulpmiddelen om de gebruikersinterface van uw toepassing te formatteren. Door, te gebruiken ThemeData en aan te passen Styles, kunt u eenvoudig UI-elementen zoals kleuren, lettertypen, tekstgroottes, enz. aanpassen om een ​​mooie en boeiende interface voor uw app te creëren.