플러터:테마

틀:플러터 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. 플러터:배포
   1. 플러터:배포(안드로이드)(미완)
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,  // 시스템 설정을 따라 다크테마 지정 결정.
  useMaterial3: true,  // 설정 안해두면 마테리얼2 이다.
);

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,
);

Material 3

Flutter 최신 버전에서는 Material 3 사용이 권장된다.

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,
);