Problème

La façon d'étendre ThemeDatadans Flutter a été une question fréquemment posée sur StackOverflow: Est-il possible «d'étendre» ThemeData dans Flutter .

Il y a même des problèmes créés dans le référentiel officiel Flutter:

1. Ajouter des propriétés personnalisées à ThemeData
2. Demande de fonctionnalité: étendez ThemeData avec des palettes spécifiques à l'application

Noter

1. Il est possible d'étendre l' ThemeDataobjet, mais la plupart d'entre nous n'ont besoin que d'une palette de couleurs personnalisée. Pour plus de simplicité, j'étendrais plutôt l' ColorSchemeobjet dans l'exemple suivant.
2. L'équipe Flutter déplace les dépendances de couleur des composants Material de ThemeDataversColorScheme , travaillons avec cette solution évolutive.

Faisons un schéma de couleurs aromatisé bootstrap:

Tout d'abord, créez un fichier custom_color_scheme.dart:

import 'package:flutter/material.dart';
extension CustomColorScheme on ColorScheme {
  Color get success => const Color(0xFF28a745);
  Color get info => const Color(0xFF17a2b8);
  Color get warning => const Color(0xFFffc107);
  Color get danger => const Color(0xFFdc3545);
}

import 'custom_color_scheme.dart';
FlatButton(
  color: Theme.of(context).colorScheme.success,
  textColor: Colors.white,
  child: const Text('Success'),
  onPressed: () {},
)

Désavantages

1. Les méthodes d'extension ne nous permettent pas de déclarer les propriétés de l'instance. Par conséquent, il n'est pas possible d'avoir un schéma de couleur différent pour un autre ThemeData(par exemple thème clair vs sombre). [Voir la section Mises à jour ci-dessous pour la solution.]
2. Vous ne pouvez pas créer de variations de ColorScheme(par exemple, une successcouleur différente dans certains composants) en utilisant la .copyWith()fonction. C'est donc très similaire à cette méthode avant dart 2.7 , juste un peu plus élégante.

Comme Pablo Pasqualino le suggère, nous pouvons réellement travailler avec une luminosité claire / sombre comme ceci:

extension CustomColorScheme on ColorScheme {
  Color get success => brightness == Brightness.light ? const Color(0xFF28a745) : const Color(0x2228a745);
}

Savez-vous que vous pouvez applaudir jusqu'à 50 fois pour un article? Allez essayer!