플러터:테마

틀:플러터 Dart:개요 플러터에 대한 지식 분류

1. 플러터:개요
   1. 플러터:VSCode
   2. 플러터:안드로이드 스튜디오
2. 플러터:실행
3. 플러터:개념 잡기
   1. 플러터:화면 하나 만들기
   2. 플러터:변하는 화면(StatefulWidget)
   3. 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)
   4. 플러터:화면 전환(Drawer)
   5. 플러터:입력 관련
      1. 플러터:버튼
      2. 플러터:키보드 입력
      3. 플러터:슬라이더
   6. 플러터:그래프 그리기(fl chart)
   7. 플러터:데이터 저장(간단한 데이터)
   8. 플러터:인증(Firebase 인증)(미완)
   9. 플러터:인증(OAuth2)(미완)
4. 권한 사용
   1. 플러터:마이크 입력
5. 위젯
   1. 플러터:아이콘
   2. 플러터:레이아웃 계열 위젯
   3. 플러터:네비게이션 계열 위젯
   4. 플러터:버튼
   5. 플러터:상태관리(미완)
6. 플러터:DB연결
   1. 플러터:Firebase(미완)
   2. 플러터:MySQL(미완)
7. 디자인
   1. 플러터:테마
   2. 플러터:앱바
8. 플러터:배포
9. 플러터:참고자료
10. 플러터:위젯
    1. 플러터:공간배치용 위젯
11. 플러터:구글 AdMob(미완)
12. 플러터:라이브러리
    1. 플러터:logger

개요

• 색이나 이런저런 설정을 한번에 변화시키기 위해 테마를 사용한다.
• 앱 전체에 적용되는 색상, 폰트, 버튼 스타일 등의 시각적 요소를 일관되게 관리하기 위한 시스템.
• 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,
);