플러터:테마

틀:플러터 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(),
);

다크 모드

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

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system,  // 시스템 설정을 따라 다크테마 지정 결정.
);

themeMode 옵션

• ThemeMode.light // 라이트 테마에 대한 기본 색상들.
• ThemeMode.dark
• ThemeMode.system

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

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

Material 3

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

ThemeData(
  useMaterial3: true,
);

Material 3 특징:

• 둥근 모서리
• 색상 자동 조합

동적인 컬러 시스템