ThemeExtension Khusus untuk Token Merek

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.

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 lerp to blend two instances when themes change.

You must implement two methods: copyWith and lerp.

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.

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.

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.

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.

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.

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.

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.

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.

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>() returns null if you never added it to ThemeData.extensions; the ! then throws.
• Skipping lerp: if lerp just returns this, theme transitions snap instead of fading.
• Wrong type argument: the type in extension<T>() must match the registered class exactly.

You now own a full custom theming workflow in Flutter:

• Subclass ThemeExtension<T> with final fields for your brand tokens.
• Implement copyWith (nullable params, fall back to this.field) and lerp (use Color.lerp, Gradient.lerp, guard the type).
• Build distinct light and dark instances and register them via ThemeData.extensions.
• Consume with Theme.of(context).extension<BrandColors>(), ideally wrapped in a context.brand getter.

The payoff: brand-specific design tokens that are type-safe, mode-aware, and animate smoothly — just like Material 3's built-in ColorScheme.