지난 글까지 화면을 만들고 입력을 받는 법을 봤으니, 이번엔 앱 전체의 색과 글꼴을 한 곳에서 정하는 테마다. 화면마다 색을 직접 지정해서 카드를 하나 만들어보자.

Container(
  padding: const EdgeInsets.all(16),
  color: Colors.white, // 카드 배경을 흰색으로 직접 지정
  child: const Text('안녕하세요'),
)

밝은 모드에서는 문제없이 보인다. 그런데 폰을 다크 모드로 바꾸고 앱을 켜면(앱에 darkTheme을 설정해 둔 상태라고 하자) 카드가 하얀 판 위에 하얀 글자가 된다. Text는 테마를 따라 글자색이 흰색으로 바뀌는데, 배경은 내가 Colors.white로 박아뒀기 때문에 안 바뀐다. 글자가 보이지 않는다.

원인: 색을 위젯마다 직접 지정하면 테마가 바꿔줄 수 없다

지난 글들에서 MaterialApp이 테마를 아래로 내려준다고 했다. 위젯이 Theme에서 색을 꺼내 쓰면 테마가 바뀔 때 같이 바뀌고, Colors.white처럼 값을 직접 쓰면 테마와 상관없이 그 색에 고정된다. 앱 전체 색을 바꾸거나 다크 모드를 지원하려면 색을 테마에서 꺼내 쓰는 습관이 필요하다.

해결 1: ThemeData로 앱 전체 색 정하기

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
      ),
      home: const HomePage(),
    );
  }
}

ColorScheme.fromSeed는 기준 색 하나(seed)로 어울리는 색 묶음을 자동으로 만들어준다. Colors.teal 하나만 정하면 버튼 색, 배경색, 글자색 등 수십 개가 알아서 정해진다. Material 3는 이 "색 묶음(ColorScheme)"이 핵심이다. 처음 만든 Flutter 프로젝트의 Colors.deepPurple 보라색 앱바가 이 방식이다.

Material 3는 Flutter 3.16부터 기본값이라서, 요즘 프로젝트는 따로 켜지 않아도 된다.

해결 2: 위젯에서는 테마에서 꺼내 쓰기

Container(
  padding: const EdgeInsets.all(16),
  color: Theme.of(context).colorScheme.surfaceContainer, // 테마에서 꺼냄
  child: Text(
    '안녕하세요',
    style: TextStyle(color: Theme.of(context).colorScheme.onSurface),
  ),
)

Theme.of(context)는 StatelessWidget 글에서 본 대로 트리에서 내 위치로부터 위로 올라가 가장 가까운 테마를 찾아오는 코드다. 이제 밝은 모드에서는 밝은 배경과 어두운 글자, 다크 모드에서는 반대로 알아서 바뀐다.

색 이름의 규칙: 짝으로 다닌다

ColorScheme의 색은 배경용 색과 그 위에 올라가는 색이 짝이다.

• primary / onPrimary: 주요 버튼, 강조
• surface / onSurface: 화면·카드 바탕과 그 위 글자
• secondary / onSecondary: 보조 강조
• error / onError: 에러 표시

on은 "이 색 위에 올라가는 색"이라는 뜻이다. primary 위에 글자를 쓸 때 onPrimary를 쓰면 배경이 밝든 어둡든 읽을 수 있는 색이 보장된다. 짝을 지켜서 쓰는 게 테마를 쓰는 요령이다.

다크 모드: darkTheme과 themeMode

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.teal,
      brightness: Brightness.dark, // 같은 seed로 어두운 버전
    ),
  ),
  themeMode: ThemeMode.system, // 기기 설정을 따라감
  home: const HomePage(),
)

• theme: 밝은 모드 테마
• darkTheme: 다크 모드 테마. 같은 seedColor에 brightness: Brightness.dark만 주면 어울리는 어두운 색이 만들어진다
• themeMode: 어느 쪽을 쓸지 정한다

themeMode에 넣을 수 있는 값은 세 가지다.

• ThemeMode.system: 기기의 다크 모드 설정을 따른다 (기본값)
• ThemeMode.light: 항상 밝게
• ThemeMode.dark: 항상 어둡게

darkTheme을 안 적으면 기기가 다크 모드여도 밝은 테마가 그대로 쓰이니, 다크 모드를 지원하려면 둘 다 적어야 한다.

앱 안에서 다크 모드 스위치 만들기

설정 화면에서 사용자가 직접 밝게·어둡게를 고르게 하려면 themeMode를 상태로 들고 있다가 바꾸면 된다. StatefulWidget과 setState가 그대로 쓰인다.

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeMode themeMode = ThemeMode.system;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal)),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.teal,
          brightness: Brightness.dark,
        ),
      ),
      themeMode: themeMode,
      home: Scaffold(
        body: Center(
          child: Switch(
            value: themeMode == ThemeMode.dark,
            onChanged: (isDark) {
              setState(() {
                themeMode = isDark ? ThemeMode.dark : ThemeMode.light;
              });
            },
          ),
        ),
      ),
    );
  }
}

스위치를 켜면 setState로 themeMode가 바뀌고, MaterialApp이 다시 그려지면서 앱 전체가 어두워진다. 이 값을 앱을 껐다 켜도 유지하려면 로컬 저장소가 필요한데, 4단계에서 다룬다.

글꼴 크기는 textTheme으로

글자도 TextStyle(fontSize: 24)처럼 숫자를 직접 적지 말고 테마의 이름 붙은 스타일을 쓴다.

Text('제목', style: Theme.of(context).textTheme.headlineMedium)
Text('본문', style: Theme.of(context).textTheme.bodyLarge)

headlineMedium, titleLarge, bodyMedium, labelSmall처럼 용도별로 크기와 굵기가 정해져 있다. 앱 전체 글꼴을 바꾸고 싶을 때 한 곳만 고치면 된다.

ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
  textTheme: const TextTheme(
    bodyLarge: TextStyle(fontSize: 18),
  ),
)

처음 만든 Flutter 앱에 Theme.of(context).textTheme.headlineMedium이 숫자 표시에 쓰인 게 이 방식이다.

특정 위젯만 일괄로 꾸미기

버튼 모양을 앱 전체에서 똑같이 맞추고 싶다면 위젯별 테마를 쓴다.

ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
    ),
  ),
)

이러면 앱 안의 모든 ElevatedButton이 둥근 모서리를 갖는다. 화면마다 버튼을 따로 꾸미지 않아도 된다.

Compose, SwiftUI와 비교하면

// Compose
MaterialTheme(
    colorScheme = if (isSystemInDarkTheme()) darkColorScheme() else lightColorScheme()
) {
    Text("안녕", color = MaterialTheme.colorScheme.onSurface)
}

// SwiftUI
Text("안녕")
    .foregroundStyle(.primary) // 다크 모드에서 자동으로 바뀌는 의미 색
    .preferredColorScheme(.dark)

항목별로 나란히 놓으면 이렇다.

• 테마 정의: Flutter ThemeData / Compose MaterialTheme / SwiftUI 에셋 카탈로그의 색 세트
• 색 묶음: Flutter ColorScheme.fromSeed / Compose lightColorScheme(), darkColorScheme() / SwiftUI 시스템 의미 색(.primary 등)
• 위젯에서 꺼내기: Flutter Theme.of(context).colorScheme / Compose MaterialTheme.colorScheme / SwiftUI Color.primary 등
• 다크 모드 전환: Flutter themeMode / Compose isSystemInDarkTheme() / SwiftUI preferredColorScheme
• 글꼴 스타일: Flutter textTheme / Compose MaterialTheme.typography / SwiftUI Font 스타일

Compose의 MaterialTheme과 구조가 거의 같다. Flutter는 Theme.of(context)로 꺼내고 Compose는 MaterialTheme.colorScheme으로 꺼낸다는 점이 다르다. SwiftUI는 Material 개념이 없어서 시스템이 정해둔 의미 색을 쓰는 쪽이다.

정리

• 색을 Colors.white처럼 위젯마다 직접 지정하면 테마가 바꿔주지 못해서, 다크 모드에서 배경과 글자가 안 보이는 일이 생긴다
• ThemeData의 ColorScheme.fromSeed(seedColor: ...)로 기준 색 하나에서 앱 전체 색 묶음을 만들고, 위젯에서는 Theme.of(context).colorScheme에서 배경과 on 짝 색을 꺼내 쓴다
• 다크 모드는 theme와 darkTheme을 둘 다 적고, themeMode로 기기 설정을 따를지 고정할지 정한다
• 글꼴은 Theme.of(context).textTheme의 이름 붙은 스타일을 쓰고, 버튼 같은 위젯 공통 모양은 위젯별 테마로 한 번에 정한다

다음 글에서는 화면 크기에 따라 레이아웃을 바꾸는 MediaQuery와 LayoutBuilder를 다뤄보겠다.