La classe ThemeData dans Flutter
Sommaire
- 1- Objectifs
- 2- Introduction à ThemeData
- 3- Propriétés de base de la classe ThemeData
- 3.1- Couleurs
- 3.2- Typographie
- 3.3- Éléments interactifs
- 3.4- Effets visuels
- 3.5- Schéma de couleurs
- 3.6- Autres styles
- 3.7- Exemple de définition de ThemeData
- 4- Création d'un thème global personnalisé avec
ThemeData
- 4.1.1- Voici un exemple de comment créer un thème dans Flutter :
- 5- Les propriétés d'accent de
ThemeData
sont obsolètes - 5.1- accentColor
- 5.2- accentTextTheme
- 6- Application
- 6.1.1- Cours Flutter
La classe ThemeData dans Flutter
-
Objectifs
- L’objectif de ce tutoriel est de comprendre comment utiliser et personnaliser la classe
ThemeData
dans Flutter pour créer des thèmes cohérents et adaptables à toute une application. Vous apprendrez à définir des thèmes globaux, à appliquer des styles de texte et à intégrer des thèmes sombres. -
Introduction à ThemeData
- Avant de commencer, il est important de noter que la classe
ThemeData
est la classe la plus importante pour le style et la thématisation dans Flutter. Cette classe fournit des propriétés permettant de personnaliser les couleurs, les polices et les tailles dans toute l’application. - Lorsque vous créez une application Flutter, elle est livrée avec un thème bleu clair par défaut appliqué à l’ensemble de l’application. Ce thème par défaut est une instance de la classe ThemeData.
- La classe
ThemeData
est un composant central pour gérer les couleurs, les styles et les polices à travers une application Flutter. Elle vous permet de définir un thème global qui est appliqué de manière cohérente. - Rôle de ThemeData
- Couleurs principales : Définit les couleurs comme celles de l’AppBar ou des boutons.
- Styles de texte : Uniformise les styles de police dans toute l’application.
- Personnalisation facile : Permet de modifier l’apparence de l’application en un seul endroit.
-
Propriétés de base de la classe ThemeData
- La classe
ThemeData
dans Flutter est utilisée pour définir les thèmes globaux d’une application, tels que les couleurs, les polices, les styles de texte, et bien plus. Voici un aperçu des propriétés de base de la classeThemeData
: -
Couleurs
primaryColor
: Couleur principale utilisée dans l’application.accentColor (remplacée par colorScheme.secondary)
: Couleur d’accentuation, utilisée pour les éléments interactifs.backgroundColor
: Couleur d’arrière-plan.scaffoldBackgroundColor
: Couleur de fond de l’écran.canvasColor
: Couleur pour les widgets comme les menus contextuels et les tiroirs.cardColor
: Couleur des cartes.dividerColor
: Couleur des séparateurs ou des lignes.-
Typographie
textTheme
: Définit les styles pour les textes globaux.primaryTextTheme
: Style de texte lié au primaryColor.accentTextTheme
: Style de texte lié à la couleur d’accentuation.fontFamily
: Définit une famille de polices globale.-
Éléments interactifs
buttonTheme
: Configure le style des boutons.textButtonTheme
: Définit le thème pour les TextButton.elevatedButtonTheme
: Style des ElevatedButton.outlinedButtonTheme
: Thème des OutlinedButton.floatingActionButtonTheme
: Style des boutons d’action flottants.iconTheme
: Définit le style des icônes globalement.appBarTheme
: Thème des barres d’application (AppBar).-
Effets visuels
brightness
: Définit le mode lumineux ou sombre (valeurs : Brightness.light ou Brightness.dark).shadowColor
: Couleur des ombres dans l’application.dividerTheme
: Personnalisation des séparateurs (Divider).-
Schéma de couleurs
colorScheme
: Fournit un ensemble de couleurs cohérent utilisé dans toute l’application (recommandé par rapport àcolorScheme.primary
colorScheme.secondary
colorScheme.background
colorScheme.error
-
Autres styles
inputDecorationTheme
: Style des champs de saisie.snackBarTheme
: Thème des messages SnackBar.sliderTheme
: Thème des Slider.dialogTheme
: Style des boîtes de dialogue (AlertDialog).checkboxTheme
: Style des Checkbox.radioTheme
: Thème des boutons radio.-
Exemple de définition de ThemeData
-
Création d’un thème global personnalisé avec
ThemeData
- La classe ThemeData contient des valeurs de couleur et de typographie pour un thème de conception de matériau. Ajoutez-le au widget MaterialApp, en utilisant sa propriété de thème , et configurez l’une des propriétés suivantes pour créer votre thème personnalisé global.
- primarySwatch
- primaryColor
- scaffoldBackgroundColor
- buttonTheme
- textTheme
- fontFamily
- iconTheme
- appBarTheme
- floatingActionButtonTheme
- Pour fournir un thème général dans Flutter, vous devez utiliser la classe
ThemeData
qui fait partie du framework Flutter. Cette classe fournit des propriétés qui définissent l’apparence visuelle d’une application. - Pour créer un thème, vous devez instancier la classe ThemeData et transmettre les valeurs souhaitées pour ses propriétés, telles que la couleur primaire, la couleur d’accentuation, la famille de polices, etc.
-
Voici un exemple de comment créer un thème dans Flutter :
- Une fois le thème créé, vous pouvez l’appliquer à l’ensemble de votre application en enveloppant votre arborescence de widgets dans le Themewidget et en transmettant votre themeobjet en tant que datapropriété.
- Cela appliquera le thème défini à l’ensemble de votre application, lui donnant un aspect visuel cohérent.
- Pour utiliser un thème dans Flutter, suivez les étapes suivantes:
- 1- Créez un objet ThemeData avec les paramètres souhaités, définissez les données de thème dans un objet ThemeData, qui contient les propriétés visuelles de votre thème, telles que la couleur et la typographie.
- 2- Enveloppez l’arborescence de widgets avec un Themewidget, en passant l’objet ThemeData comme data argument.
- 3- Accédez aux données du thème à l’aide de Theme.of(context).
primaryColor et accentColor).
ThemeData myTheme = ThemeData(
primaryColor: Colors.blue,
accentColor: Colors.amber,
backgroundColor: Colors.white,
textTheme: TextTheme(
bodyText1: TextStyle(fontSize: 16, color: Colors.black),
headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
appBarTheme: AppBarTheme(
color: Colors.blue,
titleTextStyle: TextStyle(color: Colors.white, fontSize: 20),
),
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Colors.amber,
),
colorScheme: ColorScheme.fromSwatch().copyWith(
secondary: Colors.amber,
),
);
static const ColorScheme colorSchemeLight = ColorScheme(
primary: primaryColor,
secondary: accentColor,
surface: background,
background: background,
brightness: Brightness.light,
error: failurRed,
onBackground: Colors.black,
onError: Colors.white,
onPrimary: Colors.white,
onSecondary: Colors.white,
onSurface: Colors.black,
primaryContainer: primaryColor,
secondaryContainer: accentColor,
);
mainTheme = ThemeData(
appBarTheme: appBarTheme,
brightness: Brightness.light,
primaryColor: primaryColor,
colorScheme: colorSchemeLight,
textTheme: viatoTextTheme,
backgroundColor: background,
scaffoldBackgroundColor: background);
final theme = ThemeData(
primaryColor: Colors.blue,
accentColor: Colors.yellow,
fontFamily: 'Roboto',
textTheme: TextTheme(
headline: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold
),
body1: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.normal
),
),
);
MaterialApp(
theme: theme,
home: MyHomePage(),
)
Les propriétés d’accent de ThemeData
sont obsolètes
- Propriété accentColor : Utilisez colorScheme.secondaire à la place.
-
accentColor
-
accentTextTheme
Application
- Voici quelques exercices pour vous aider à comprendre comment utiliser ThemeData dans Flutter:
- Créez une nouvelle application Flutter avec un thème sombre en utilisant ThemeData.
- Modifiez la couleur de fond de l’application en utilisant les propriétés de couleur dans ThemeData.
- Ajoutez une police personnalisée à l’application en utilisant la propriété textTheme dans ThemeData.
- Modifiez les couleurs des boutons en utilisant les propriétés buttonTheme et buttonColor dans ThemeData.
- Créez plusieurs thèmes différents pour l’application en utilisant des instances de ThemeData distinctes et en les switchant selon les préférences de l’utilisateur.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
// Définit la luminosité et les couleurs par défaut.
brightness: Brightness.light,
primaryColor: Colors.indigo,
// Définit la famille de polices par défaut.
fontFamily: 'Montserrat',
// Définit le `TextTheme` par défaut. Utilisez ceci pour spécifier la valeur par défaut
// style de texte pour les titres, les titres, les corps de texte, etc.
textTheme: TextTheme(
headline1: TextStyle(
fontSize: 36.0,
fontWeight: FontWeight.bold,
color: Colors.indigo[900],
),
headline2: const TextStyle(
fontSize: 28.0,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 126, 26, 109),
),
bodyText1: TextStyle(
fontSize: 16.0,
color: Colors.grey[800],
fontWeight: FontWeight.normal,
),
bodyText2: TextStyle(
fontSize: 14.0,
color: Colors.grey[600],
fontWeight: FontWeight.normal,
),
),
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.primary,
buttonColor: Colors.indigo[900],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
appBarTheme: AppBarTheme(
color: Colors.indigo[50],
textTheme: TextTheme(
headline6: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.indigo[900],
),
),
),
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Mon thème personnalisé'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(10),
child: Text(
'Bienvenue dans mon application personnalisée!',
style: Theme.of(context).textTheme.headline1,
),
),
Padding(
padding: EdgeInsets.all(10),
child: Text(
'Bienvenue dans mon application personnalisée!',
style: Theme.of(context).textTheme.headline2,
),
),
Padding(
padding: EdgeInsets.all(10),
child: Text(
'Bienvenue dans mon application personnalisée!',
style: Theme.of(context).textTheme.bodyText1,
),
),
Padding(
padding: EdgeInsets.all(10),
child: Text(
'Bienvenue dans mon application personnalisée!',
style: Theme.of(context).textTheme.bodyText2,
),
),
],
),
),
);
}
}