개요

색이나 이런저런 설정을 한번에 변화시키기 위해 테마를 사용한다.
앱 전체에 적용되는 색상, 폰트, 버튼 스타일 등의 시각적 요소를 일관되게 관리하기 위한 시스템.
Material Design 철학을 기반으로, 위젯 단위가 아닌 앱 단위 스타일 관리.

장점

UI 일관성 유지(당연하지만, 규모가 커질수록 용이해진다.)

스타일 변경 시 코드 수정 최소화
다크 모드 / 라이트 모드 대응 용이

기본 구조

Flutter 앱은 일반적으로 MaterialApp 위젯을 루트로 가지며, 이곳에서 Theme를 정의한다.

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue,
  ),
  home: MyHomePage(),
);

테마를 설정하지 않으면 기본 값은 아래와 같다고 보면 된다.

MaterialApp(
  theme: ThemeData.light(),
  themeMode: ThemeData.light(),
);

권장 설정

Flutter는 라이트 / 다크 테마를 동시에 정의할 수 있다.

MaterialApp(
  theme: ThemeData.light(),  // 라이트 테마에 대한 기본 색상들.
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system,  // 시스템 설정을 따라 다크테마 지정 결정.
);

themeMode 옵션

ThemeMode.light
ThemeMode.dark
ThemeMode.system

위처럼 light나 dark 테마를 자동으로 넣을 수도 있고, 이후 소개하는 것처럼 색을 수동으로 지정할 수도 있다.

세부 구성

ThemaData에 light, dark 등을 지정하지 않고 일일이 구현한다면 아래와 같은 형태이다.

ThemeData.light() ≈ ThemeData(
  brightness: Brightness.light,
  colorScheme: ColorScheme.light(),
  textTheme: Typography.material2018().black,
);

항목	Light Theme (ThemeData.light)	Dark Theme (ThemeData.dark)
기본 용도	밝은 환경에서의 기본 UI	어두운 환경에서 눈부심 감소
Brightness	`Brightness.light`	`Brightness.dark`
기본 색상 체계	Material Design Light ColorScheme	Material Design Dark ColorScheme
Primary 색상	파란색 계열 (Material Blue)	밝은 파란색 계열 (BlueAccent)
Background 색상	흰색 또는 밝은 회색	거의 검정에 가까운 색상
Surface 색상	흰색	짙은 회색
Text 기본 색상	검정 / 진한 회색	흰색 / 밝은 회색
기본 폰트	Roboto	Roboto
ElevatedButton	파란 배경 + 흰 글씨	밝은 파란 배경 + 어두운 글씨
TextButton	파란 텍스트	밝은 파란 텍스트
OutlinedButton	파란 테두리	밝은 파란 테두리
Icon 색상	검정 또는 진한 회색	흰색 또는 밝은 회색
AppBar 배경	Primary 색상	거의 검정
Card 배경	흰색	어두운 회색
Error 색상	빨간색	밝은 빨간색

Material 3

Flutter 최신 버전에서는 Material 3 사용이 권장된다. 설정 안해두면 기본적으로 마테리얼 2이다.

ThemeData(
  useMaterial3: true,
);

Material 3 특징:

둥근 모서리
색상 자동 조합

동적인 컬러 시스템

ColorScheme

Flutter에서는 개별 색상보다 ColorScheme 사용을 권장.

ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.teal,
    brightness: Brightness.light,
  ),
);

주요 색상 구성:

primary
secondary
background
surface
error

TextTheme

앱 전체 텍스트 스타일을 정의한다.

ThemeData(
  textTheme: TextTheme(
    bodyLarge: TextStyle(fontSize: 18),
    titleLarge: TextStyle(fontWeight: FontWeight.bold),
  ),
);

자주 사용하는 텍스트 스타일:

bodySmall / bodyMedium / bodyLarge
titleSmall / titleMedium / titleLarge
headlineSmall / headlineMedium / headlineLarge

Button Theme

Flutter 2.0 이후 버튼은 다음 세 가지로 통합되었다.

ElevatedButton
TextButton
OutlinedButton

각 버튼은 개별 스타일을 테마에서 정의할 수 있다.

ElevatedButton Theme

ThemeData(
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom(
      backgroundColor: Colors.blue,
      foregroundColor: Colors.white,
    ),
  ),
);

TextButton Theme

ThemeData(
  textButtonTheme: TextButtonThemeData(
    style: TextButton.styleFrom(
      foregroundColor: Colors.blue,
    ),
  ),
);

Theme.of(context)

위젯 내부에서 현재 테마에 접근할 때 사용한다.

final theme = Theme.of(context);

Text(
  'Hello',
  style: theme.textTheme.bodyLarge,
);