close

Formatieren der Benutzeroberfläche mit ThemeData und Benutzerdefiniert Styles in Flutter

In Flutter können Sie das Erscheinungsbild Ihrer Anwendung formatieren ThemeData und anpassen styles. ThemeData ist eine Klasse, die Eigenschaften enthält, um die vorherrschende Farbe styles, Schriftarten padding usw. für die gesamte Anwendung zu definieren. styles Mit Custom Style können Sie es individuell anpassen Widget. Hier finden Sie detaillierte Anweisungen zur Verwendung ThemeData und Benutzerdefiniert Styles in Flutter:

ThemeData

In ist eine Klasse Flutter, ThemeData die Attribute zum Definieren der Primärfarbe, der Schriftfamilie padding und vieler anderer Stiloptionen für die gesamte Anwendung enthält. Mithilfe von ThemeData können Sie das Gesamterscheinungsbild Ihrer App schnell ändern, ohne jedes einzelne Erscheinungsbild ändern zu müssen Widget.

Gemeinsame Eigenschaften von ThemeData:

  • primaryColor: Die Primärfarbe für Hauptelemente der App, wie die App-Leiste, Schaltflächen usw.
  • accentColor: Die Akzentfarbe für sekundäre Elemente oder Hervorhebungen in der Benutzeroberfläche, z. B. FloatingActionButton.
  • backgroundColor: Die Hintergrundfarbe für die gesamte App.
  • textTheme: Definiert den Primärtext styles für verschiedene Textelemente in der App, wie Überschriften, Textkörper usw.
  • textTheme.headline1: Textstil für Überschriftenebene 1.
  • textTheme.headline2: Textstil für Überschriftenebene 2.
  • textTheme.bodyText1: Textstil für den Haupttext.
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(),  
)

 

Benutzerdefinierter Stil

Mit „Benutzerdefiniert“ Styles können Sie den Stil individuell anpassen Widget. Durch die Verwendung des style Attributs von Widgets wie Text, Container, RaisedButton usw. können Sie Schriftart, Farbe, Textgröße padding und verschiedene andere Attribute ändern.

Allgemeine Attribute von TextStyle(wird für Text-Widget verwendet):

  • fontSize: Die Schriftgröße.
  • fontWeight: Die Schriftstärke.
  • color: Die Textfarbe.
  • fontStyle: Der Schriftstil, z. B. Fett, Kursiv.
  • letterSpacing: Der Abstand zwischen den Zeichen.
  • wordSpacing: Der Abstand zwischen Wörtern.
  • decoration: Die Textdekoration, z. B. unterstrichen, durchgestrichen.

Beispiel für die Verwendung von „Benutzerdefiniert“ 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)),  
)

 

Benutzen Themes und Styles mit MediaQuery

Sie können Themes und Styles mit kombinieren MediaQuery, um die Benutzeroberfläche basierend auf der Bildschirmgröße oder Geräteauflösung anzupassen.

Beispiel:

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

 

Abschluss:

Flutter bietet leistungsstarke Tools zum Formatieren der Benutzeroberfläche Ihrer Anwendung. Durch die Verwendung ThemeData und Anpassung Styles können Sie Benutzeroberflächenelemente wie Farben, Schriftarten, Textgrößen usw. ganz einfach anpassen, um eine schöne und ansprechende Benutzeroberfläche für Ihre App zu erstellen.