플러터:테마 편집하기 (부분)

= 기본 구조 =
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,  // 시스템 설정을 따라 다크테마 지정 결정.
);

</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>

{| class="wikitable"
! 항목
! Light Theme<br/>(ThemeData.light)
! Dark Theme<br/>(ThemeData.dark)
|-
| 기본 용도
| 밝은 환경에서의 기본 UI
| 어두운 환경에서 눈부심 감소
|-
| Brightness
| <code>Brightness.light</code>
| <code>Brightness.dark</code>
|-
| 기본 색상 체계
| 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이다.<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>

*