close

Formatage de l'interface utilisateur avec ThemeData et personnalisé Styles dans Flutter

Dans Flutter, vous pouvez formater l'apparence de votre application en utilisant ThemeData et personnaliser le styles. ThemeData est une classe qui contient des propriétés pour définir la couleur dominante styles, les polices, padding etc. pour l'ensemble de l'application. Le style personnalisé vous permet de personnaliser styles pour chaque élément spécifique Widget. Voici des instructions détaillées sur la façon d'utiliser ThemeData et de personnaliser Styles dans Flutter  :

ThemeData

Dans Flutter, ThemeData est une classe qui contient des attributs permettant de définir la couleur principale, la famille de polices, padding et de nombreuses autres options de style pour l'ensemble de l'application. En utilisant ThemeData, vous pouvez modifier rapidement l'apparence générale de votre application sans avoir à modifier chaque individu Widget.

Attributs communs de ThemeData:

  • primaryColor: La couleur principale des principaux éléments de l'application, tels que la barre d'application, les boutons, etc.
  • accentColor: la couleur d'accentuation des éléments secondaires ou des surlignages dans l'interface utilisateur, tels que FloatingActionButton.
  • backgroundColor: La couleur d'arrière-plan de toute l'application.
  • textTheme: définit le texte principal styles pour différents éléments de texte dans l'application, tels que les en-têtes, le corps du texte, etc.
  • textTheme.headline1: Style de texte pour le titre de niveau 1.
  • textTheme.headline2: Style de texte pour le niveau de titre 2.
  • textTheme.bodyText1: Style de texte pour le corps du texte principal.
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(),  
)

 

Style personnalisé

Personnalisé Styles vous permet de personnaliser le style pour chaque élément spécifique Widget. En utilisant l' style attribut de Widgets comme Text, Container, RaisedButton, etc., vous pouvez modifier la police, la couleur, la taille du texte, padding et divers autres attributs.

Attributs communs de TextStyle(utilisés pour Text Widget) :

  • fontSize: La taille de la police.
  • fontWeight: L'épaisseur de la police.
  • color: La couleur du texte.
  • fontStyle: Le style de police, tel que gras, italique.
  • letterSpacing: L'espacement entre les caractères.
  • wordSpacing: L'espacement entre les mots.
  • decoration: la décoration du texte, telle que le soulignement, le barré.

Exemple utilisant 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)),  
)

 

Utiliser Themes et Styles avec MediaQuery

Vous pouvez combiner Themes et Styles avec MediaQuery pour ajuster l'interface utilisateur en fonction de la taille de l'écran ou de la résolution de l'appareil.

Exemple:

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

 

Conclusion:

Flutter fournit des outils puissants pour formater l'interface utilisateur de votre application. En utilisant ThemeData et en personnalisant Styles, vous pouvez facilement ajuster les éléments de l'interface utilisateur tels que les couleurs, les polices, les tailles de texte, etc., pour créer une interface attrayante et attrayante pour votre application.