ThemeExtension personnalisé pour les tokens de marque
Définissez et utilisez des tokens de conception personnalisés en créant une classe ThemeExtension.
ThemeExtension personnalisé pour les tokens de marque est une leçon Flutter Mobile Development gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Flutter Mobile Development, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Flutter Mobile Development comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Why Brand Tokens Need a Home
Material 3 gives you a rich ColorScheme, but real products carry extra design decisions that don't map to any built-in slot: a brand gradient, a success color, a promotional accent, a custom card radius.
Hardcoding these as global constants breaks down the moment you support light and dark modes, because a single constant can't change with the active ThemeData.
- You want these values to live inside the theme.
- You want them to interpolate smoothly during theme animations.
- You want to read them with the same
Theme.of(context)ergonomics as everything else.
Flutter's answer is ThemeExtension.
What a ThemeExtension Is
ThemeExtension<T> is an abstract class you subclass to attach your own typed bundle of values to a ThemeData.
The generic parameter T is your own class. This is what lets Flutter store and later retrieve your extension by its exact type instead of by a string key.
- It is type-safe: no casting from a
Map. - It is theme-aware: it ships inside
ThemeData, so light and dark can hold different instances. - It supports animation: Flutter calls
lerpto blend two instances when themes change.
You must implement two methods: copyWith and lerp.
Declaring the Extension Class
Start by subclassing ThemeExtension with your class as the type argument. Make every field final so instances are immutable.
Here we model a small brand palette: a promotional accent, a success color, and a brand gradient.
import 'package:flutter/material.dart';
class BrandColors extends ThemeExtension<BrandColors> {
const BrandColors({
required this.accent,
required this.success,
required this.brandGradient,
});
final Color accent;
final Color success;
final Gradient brandGradient;
@override
ThemeExtension<BrandColors> copyWith({
Color? accent,
Color? success,
Gradient? brandGradient,
}) {
return BrandColors(
accent: accent ?? this.accent,
success: success ?? this.success,
brandGradient: brandGradient ?? this.brandGradient,
);
}
}Implementing copyWith
copyWith returns a new instance with some fields replaced. The pattern is always the same: each parameter is nullable, and you fall back to this.field when the caller passes null.
- It keeps the class immutable — you never mutate, you clone with changes.
- It is what consumers use to tweak a single token without rebuilding the whole object.
Note the return type is ThemeExtension<BrandColors>, matching the abstract signature, even though you construct a concrete BrandColors.
Implementing lerp for Smooth Transitions
lerp (linear interpolation) blends this toward another instance by a factor t between 0.0 and 1.0. Flutter calls it during theme animations so your custom tokens fade as smoothly as the built-in ones.
Use the static helpers each type provides: Color.lerp and Gradient.lerp. Guard against the other being a different extension type by returning this.
@override
ThemeExtension<BrandColors> lerp(
covariant ThemeExtension<BrandColors>? other,
double t,
) {
if (other is! BrandColors) {
return this;
}
return BrandColors(
accent: Color.lerp(accent, other.accent, t)!,
success: Color.lerp(success, other.success, t)!,
brandGradient: Gradient.lerp(brandGradient, other.brandGradient, t)!,
);
}Defining Light and Dark Instances
Because the extension lives inside ThemeData, you create one instance tuned for light mode and another for dark mode. Expose them as static const (or static final when a value isn't const-constructible) on the class for easy reference.
This is exactly the win over global constants: the same token name resolves to different values depending on the active theme.
class BrandColors extends ThemeExtension<BrandColors> {
// ...constructor, fields, copyWith, lerp as before...
static const light = BrandColors(
accent: Color(0xFFFF6D00),
success: Color(0xFF2E7D32),
brandGradient: LinearGradient(
colors: [Color(0xFFFF6D00), Color(0xFFFFAB40)],
),
);
static const dark = BrandColors(
accent: Color(0xFFFFAB40),
success: Color(0xFF66BB6A),
brandGradient: LinearGradient(
colors: [Color(0xFFFFAB40), Color(0xFFFFD180)],
),
);
}Registering the Extension on ThemeData
Attach instances through the extensions parameter of ThemeData. It takes an Iterable of extensions; Flutter indexes them by runtime type.
Give your light ThemeData the light instance and your dark ThemeData the dark instance so they switch automatically with the platform brightness.
MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
extensions: const [BrandColors.light],
),
darkTheme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.deepPurple,
brightness: Brightness.dark,
),
extensions: const [BrandColors.dark],
),
home: const HomePage(),
);Consuming the Extension in a Widget
Read your extension with Theme.of(context).extension<BrandColors>(). The generic type argument is the lookup key, returning a nullable BrandColors?.
Once you have the instance, every token is a plain typed field — no casts, full autocomplete.
class PromoBanner extends StatelessWidget {
const PromoBanner({super.key});
@override
Widget build(BuildContext context) {
final brand = Theme.of(context).extension<BrandColors>()!;
return Container(
decoration: BoxDecoration(
gradient: brand.brandGradient,
borderRadius: BorderRadius.circular(16),
),
padding: const EdgeInsets.all(16),
child: Text(
'Limited offer',
style: TextStyle(color: brand.accent),
),
);
}
}A Clean Consumption Extension
Calling Theme.of(context).extension<BrandColors>()! everywhere is noisy. A common idiom is to add a small BuildContext extension that hides the lookup behind a getter.
- It centralizes the non-null assertion in one place.
- Call sites become a tidy
context.brand.accent.
extension BrandThemeX on BuildContext {
BrandColors get brand =>
Theme.of(this).extension<BrandColors>()!;
}
// Usage inside any build method:
// final color = context.brand.success;Pure-Dart Mental Model of lerp
You can reason about lerp without Flutter. Interpolation is just a + (b - a) * t applied per channel. The snippet below blends two integers the same way Color.lerp blends each ARGB channel.
Running this shows how t = 0 yields the start, t = 1 yields the end, and t = 0.5 yields the midpoint — the exact behavior your theme animation relies on.
int lerpInt(int a, int b, double t) {
return (a + (b - a) * t).round();
}
void main() {
const start = 0; // think: red channel of color A
const end = 200; // red channel of color B
for (final t in [0.0, 0.25, 0.5, 0.75, 1.0]) {
print('t=$t -> ${lerpInt(start, end, t)}');
}
}Multiple Extensions and Common Pitfalls
You can register several extensions side by side — for example BrandColors and a separate BrandShapes for radii and spacing. Flutter keys each by its own type, so they never collide.
- Forgetting to register:
extension<BrandColors>()returnsnullif you never added it toThemeData.extensions; the!then throws. - Skipping lerp: if
lerpjust returnsthis, theme transitions snap instead of fading. - Wrong type argument: the type in
extension<T>()must match the registered class exactly.
ThemeData(
extensions: const [
BrandColors.light,
BrandShapes.standard,
],
);
// Look each one up independently:
// final brand = Theme.of(context).extension<BrandColors>()!;
// final shapes = Theme.of(context).extension<BrandShapes>()!;Quick Check
You added BrandColors to your light and dark ThemeData and now animate between them. The brand accent color jumps abruptly instead of fading smoothly. Which mistake most likely causes this?
Recap
You now own a full custom theming workflow in Flutter:
- Subclass
ThemeExtension<T>withfinalfields for your brand tokens. - Implement
copyWith(nullable params, fall back tothis.field) andlerp(useColor.lerp,Gradient.lerp, guard the type). - Build distinct
lightanddarkinstances and register them viaThemeData.extensions. - Consume with
Theme.of(context).extension<BrandColors>(), ideally wrapped in acontext.brandgetter.
The payoff: brand-specific design tokens that are type-safe, mode-aware, and animate smoothly — just like Material 3's built-in ColorScheme.
Apprends Dart avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 22
- Leçons
- 88
Questions Fréquemment Posées
La leçon « ThemeExtension personnalisé pour les tokens de marque » est-elle gratuite ?
Oui — le texte complet de « ThemeExtension personnalisé pour les tokens de marque » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Flutter Mobile Development, passe à CoddyKit PRO. Le cours Flutter Mobile Development comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « ThemeExtension personnalisé pour les tokens de marque » ?
Définissez et utilisez des tokens de conception personnalisés en créant une classe ThemeExtension. Tu pratiques Flutter Mobile Development avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Flutter Mobile Development ?
Aucune expérience préalable n'est requise. Flutter Mobile Development sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « ThemeExtension personnalisé pour les tokens de marque » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Flutter Mobile Development ?
Oui. Chaque leçon Flutter Mobile Development inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Palettes de couleurs Material 3 et couleurs initiales
- Couleur dynamique et thèmes clair/sombre adaptatifs
- ThemeExtension personnalisé pour les tokens de marque
- Typographie réactive et thèmes des composants