Thématisation

Meilleures pratiques de thématisation Material 3 pour les applications Flutter utilisant ThemeData comme source unique de vérité pour les couleurs, la typographie, les styles de composants et l'espacement.

Normes fondamentales

Appliquez ces normes à TOUS les travaux de thématisation :

• Utilisez ThemeData comme source unique de vérité — ne mettez jamais en dur les couleurs ou styles de texte dans les widgets
• Référencez les couleurs via Theme.of(context).colorScheme — jamais Colors.blue, Colors.red ou de valeurs Color en dur
• Référencez les styles de texte via Theme.of(context).textTheme — jamais TextStyle(...) en dur dans le code widget
• Utilisez ColorScheme pour toutes les définitions de couleur — le système de couleurs structuré de Material 3
• Centralisez les thèmes de composants dans ThemeData — définissez FilledButtonThemeData, InputDecorationTheme, etc. dans le thème, pas par widget
• Définissez un système d'espacement avec une unité de base — pas de valeurs en pixels arbitraires pour le padding, les marges ou les écarts
• Supportez les thèmes clair et sombre dès le départ — utilisez ThemeData pour que le changement de thème ne nécessite zéro logique conditionnelle dans les widgets
• Évitez la logique conditionnelle pour la thématisation dans l'interface — ne vérifiez jamais la luminosité dans le code widget ; laissez ThemeData s'en charger
• Préférez EdgeInsets.only et EdgeInsets.symmetric — jamais EdgeInsets.fromLTRB (les arguments positionnels sont source d'erreurs)

Système de couleurs

Classe personnalisée de couleurs

Centralisez toutes les définitions de couleur dans une classe dédiée :

abstract class AppColors {
  static const primaryColor = Color(0xFF4F46E5);
  static const secondaryColor = Color(0xFF9C27B0);
  static const errorColor = Color(0xFFDC2626);
  static const surfaceColor = Color(0xFFFAFAFA);
}

Configuration de ColorScheme

La classe ColorScheme inclut 45 couleurs basées sur les spécifications Material 3. Configurez-la au sein de ThemeData :

ThemeData(
  colorScheme: ColorScheme(
    brightness: Brightness.light,
    primary: AppColors.primaryColor,
    secondary: AppColors.secondaryColor,
    error: AppColors.errorColor,
    surface: AppColors.surfaceColor,
    onPrimary: Colors.white,
    onSecondary: Colors.white,
    onError: Colors.white,
    onSurface: Colors.black,
  ),
)

Pour un prototypage rapide, utilisez ColorScheme.fromSeed() :

ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: AppColors.primaryColor,
  ),
)

Variantes de thème clair et sombre

class AppTheme {
  static ThemeData get light => ThemeData(
    colorScheme: ColorScheme(
      brightness: Brightness.light,
      primary: AppColors.primaryColor,
      surface: AppColors.surfaceColor,
      // ... rôles de couleur restants
    ),
  );

  static ThemeData get dark => ThemeData(
    colorScheme: ColorScheme(
      brightness: Brightness.dark,
      primary: AppColors.primaryColorDark,
      surface: AppColors.surfaceColorDark,
      // ... rôles de couleur restants
    ),
  );
}

Accès aux couleurs

@override
Widget build(BuildContext context) {
  final colorScheme = Theme.of(context).colorScheme;

  return ColoredBox(
    color: colorScheme.surface,
    child: Text(
      'Hello',
      style: TextStyle(color: colorScheme.onSurface),
    ),
  );
}

Typographie

Définissez une classe AppTextStyle avec un style de base et des variantes nommées (displayLarge, headlineMedium, bodyLarge, etc.), puis intégrez-les dans ThemeData.textTheme. Accédez aux styles via Theme.of(context).textTheme.

Consultez references/typography.md pour la configuration des ressources de polices, la classe AppTextStyle complète, l'intégration de TextTheme et les modèles d'accès aux widgets.

Thèmes de composants

Définissez les thèmes de composants de manière centralisée dans ThemeData (par ex., filledButtonTheme, inputDecorationTheme, appBarTheme) plutôt que de styliser les instances de widget individuelles. Une classe AppTheme complète rassemble ColorScheme, TextTheme et tous les thèmes de composants dans un seul ThemeData.

Consultez references/components.md pour les exemples de thème FilledButton, InputDecoration et AppBar, l'assemblage du thème complet et les modèles d'accès aux widgets.

Système d'espacement

Définissez une classe AppSpacing avec une unité de base (par ex., 16px) et des constantes nommées (xxs à xxlg). Utilisez EdgeInsets.only ou EdgeInsets.symmetric — jamais EdgeInsets.fromLTRB.

Consultez references/spacing.md pour la classe AppSpacing complète, les exemples d'utilisation et les préférences EdgeInsets.

Modèles courants

Créer un thème

1. Définissez AppColors avec toutes les constantes de couleur
2. Définissez AppTextStyle avec toutes les constantes de style de texte
3. Définissez AppSpacing avec une échelle d'espacement basée sur une unité de base
4. Créez une classe AppTheme avec des getters light et dark
5. Configurez ColorScheme, TextTheme et les thèmes de composants dans chaque ThemeData
6. Passez AppTheme.light et AppTheme.dark à MaterialApp

Ajouter un nouveau jeton de couleur

1. Ajoutez la constante de couleur à AppColors
2. Mappez-la au rôle ColorScheme approprié (ou créez une extension de thème pour les jetons personnalisés)
3. Référencez-la via Theme.of(context).colorScheme.<role> dans les widgets

Support du mode sombre

1. Créez des instances ColorScheme séparées pour le clair et le sombre
2. Utilisez le même TextTheme et les mêmes thèmes de composants (ils s'adaptent automatiquement via colorScheme)
3. Passez les deux thèmes à MaterialApp via theme et darkTheme
4. Ne vérifiez jamais Brightness dans le code widget — laissez ThemeData gérer le changement

Référence rapide