Flutter Mobile Development · 강의

브랜드 토큰을 위한 사용자 지정 ThemeExtension

ThemeExtension 클래스를 작성해 맞춤형 디자인 토큰을 정의하고 사용합니다.

레슨 3/413개 단계

브랜드 토큰을 위한 사용자 지정 ThemeExtension은(는) CoddyKit의 무료 Flutter Mobile Development 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Flutter Mobile Development 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Flutter Mobile Development 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

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 lerp to 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>() 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.

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> 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.

무료로 시작

AI 튜터와 함께 Dart을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 22
레슨: 88

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“브랜드 토큰을 위한 사용자 지정 ThemeExtension” 강의는 무료인가요?

네 — “브랜드 토큰을 위한 사용자 지정 ThemeExtension” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Flutter Mobile Development 강의 전체를 잠금 해제할 수 있습니다. Flutter Mobile Development 강의에는 총 4개의 강의가 포함되어 있습니다.

“브랜드 토큰을 위한 사용자 지정 ThemeExtension”에서 뭘 배우나요?

ThemeExtension 클래스를 작성해 맞춤형 디자인 토큰을 정의하고 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 Flutter Mobile Development을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Flutter Mobile Development을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Flutter Mobile Development은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“브랜드 토큰을 위한 사용자 지정 ThemeExtension” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Flutter Mobile Development 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Flutter Mobile Development 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Flutter Mobile Development(으)로 돌아가기