flutter/flutter-theming

Que fait flutter-theming ?

Comment personnaliser le thème de votre application à l'aide du système de thèmes de Flutter

Introduction

Flutter fournit un système de thèmes puissant et flexible qui vous permet de définir des couleurs, des polices, des styles de boutons et bien plus encore de manière centralisée. Au lieu de paramétrer manuellement chaque widget, vous pouvez définir un thème global une seule fois et y accéder dans toute votre application.

Définition d'un thème global

Le thème global de votre application est défini via la propriété theme du MaterialApp (ou CupertinoApp). Utilisez le constructeur ThemeData() pour spécifier les valeurs par défaut.

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    fontFamily: 'Roboto',
    textTheme: TextTheme(
      headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      bodyText1: TextStyle(fontSize: 14.0, color: Colors.grey[600]),
    ),
  ),
  home: MyHomePage(),
);

Accès au thème courant

Pour utiliser le thème dans vos widgets, utilisez Theme.of(context). Cela vous donne accès à toutes les propriétés du thème courant.

Widget build(BuildContext context) {
  return Text(
    'Bonjour le monde',
    style: Theme.of(context).textTheme.headline1,
  );
}

Personnalisation locale avec Theme

Si vous souhaitez remplacer certaines parties du thème pour un sous-arbre de widgets, utilisez le widget Theme().

Theme(
  data: Theme.of(context).copyWith(
    primaryColor: Colors.red,
    textTheme: Theme.of(context).textTheme.copyWith(
      bodyText1: TextStyle(color: Colors.redAccent),
    ),
  ),
  child: Column(
    children: [
      Text('Ce texte sera rouge'),
      ElevatedButton(
        onPressed: () {},
        child: Text('Bouton rouge'),
      ),
    ],
  ),
);

Thèmes clair et sombre

Vous pouvez définir des thèmes séparés pour le mode clair et le mode sombre en utilisant les propriétés theme et darkTheme.

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system, // respecte les préférences système
  home: MyHomePage(),
);

Extension de thème

Vous pouvez également étendre le thème avec vos propres propriétés en utilisant ThemeData.extensions ou en écrivant votre propre classe d'extension.

Pour aller plus loin

• Consultez la documentation Flutter sur les thèmes
• Cette compétence est compatible avec tous les environnements Flutter (mobile, web, desktop) sans dépendances externes.