플러터:테마 편집하기

{{플러터}}

== 개요 ==

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

=== 장점 ===

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

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

= 기본 구조 =
Flutter 앱은 일반적으로 <code>MaterialApp</code> 위젯을 루트로 가지며, 이곳에서 Theme를 정의한다.<syntaxhighlight lang="dart">
MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue,
  ),
  home: MyHomePage(),
);
</syntaxhighlight>테마를 설정하지 않으면 기본 값은 아래와 같다고 보면 된다.<syntaxhighlight lang="dart">
MaterialApp(
  theme: ThemeData.light(),
  themeMode: ThemeData.light(),
);

</syntaxhighlight>
== 권장 설정 ==
Flutter는 라이트 / 다크 테마를 동시에 정의할 수 있다.<syntaxhighlight lang="dart">
MaterialApp(
  theme: ThemeData.light(),  // 라이트 테마에 대한 기본 색상들.
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system,  // 시스템 설정을 따라 다크테마 지정 결정.
  useMaterial3: true,  // 설정 안해두면 마테리얼2 이다.
);

</syntaxhighlight>themeMode 옵션

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

=== 세부 구성 ===
ThemaData에 light, dark 등을 지정하지 않고 일일이 구현한다면 아래와 같은 형태이다.<syntaxhighlight lang="dart">
ThemeData.light() ≈ ThemeData(
  brightness: Brightness.light,
  colorScheme: ColorScheme.light(),
  textTheme: Typography.material2018().black,
);
</syntaxhighlight>

=== Material 3 ===
Flutter 최신 버전에서는 Material 3 사용이 권장된다.<syntaxhighlight lang="dart">ThemeData(
  useMaterial3: true,
);</syntaxhighlight>Material 3 특징:

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

동적인 컬러 시스템
== ColorScheme ==
Flutter에서는 개별 색상보다 ColorScheme 사용을 권장.<syntaxhighlight lang="dart">
ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.teal,
    brightness: Brightness.light,
  ),
);
</syntaxhighlight>주요 색상 구성:

* primary
* secondary
* background
* surface
* error

== TextTheme ==
앱 전체 텍스트 스타일을 정의한다.<syntaxhighlight lang="dart">
ThemeData(
  textTheme: TextTheme(
    bodyLarge: TextStyle(fontSize: 18),
    titleLarge: TextStyle(fontWeight: FontWeight.bold),
  ),
);
</syntaxhighlight>자주 사용하는 텍스트 스타일:

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

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

* ElevatedButton
* TextButton
* OutlinedButton

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

=== ElevatedButton Theme ===
<syntaxhighlight lang="dart">
ThemeData(
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom(
      backgroundColor: Colors.blue,
      foregroundColor: Colors.white,
    ),
  ),
);
</syntaxhighlight>

=== TextButton Theme ===
<syntaxhighlight lang="dart">
ThemeData(
  textButtonTheme: TextButtonThemeData(
    style: TextButton.styleFrom(
      foregroundColor: Colors.blue,
    ),
  ),
);
</syntaxhighlight>

== Theme.of(context) ==
위젯 내부에서 현재 테마에 접근할 때 사용한다.<syntaxhighlight lang="dart">
final theme = Theme.of(context);

Text(
  'Hello',
  style: theme.textTheme.bodyLarge,
);
</syntaxhighlight>

*