Flutter | 알아두면 정말 편한 ThemeData를 이용한 색관리

Flutter 개발하면서 공부한 ThemeData를 정리한 글이다.

Flutter - ThemeData

Flutter - 알아두면 정말 편리한 ThemeData

ThemeData를 알아보게 된 동기

Flutter로 급한 마음에 앱을 만들게 되면, themeData 설정은 최소화로 하고 만드는 위젯에서 하나하나 빠르게 세팅하게 된다. 이렇게 하면 일단 당장 원하는 스타일의 위젯을 만들 수 있어 '급하게' 만들땐 속이 편하다. 그런데 조금만 더 디테일한 설정을 하겠다고 하면 이런 작업이 얼마나 많은 일을 만드는지 알 수 있다.

Light & Dart 모드 변환

가장 직관적인 상황은 Light, Dark 모드 전환이다. 요즘은 안드로이드와 iOS 모두 다크모드를 제공한다. 따라서 앱을 만들면 이 기능을 제공하고 싶은 욕심이 난다. 하지만 단순히 지원했다간 기존의 엘레멘트들 간에 색조합이 이상해져서 UI와 UX 모두를 저해시킬 수 있다. 이 문제를 또 '빠르게' 해결하고자 한다면, 결국 Dark모드 지원을 포기하는 결정을 하기 쉽다.

ThemeData

그럼 Dark 모드를 완벽하게 제공하기 위해선 어떻게 해야 할까? 유일한 정답이라곤 할 수 없지만, 최적의 답으로 보이는 방법은 'ThemeData'를 활용하는 것이다. ydmins는 이번에 간단한 '몸무게 기록 앱'을 만드는 과정 중, 그 동안 배우기를 미뤄 밀린 숙제처럼 여겨진 ThemeData를 사용할 수 있는 수준으로 알아보기로 하였다.

Flutter | Android | 몸무게 기록 앱 - 기획

ThemeData란?

ThemeData를 어떻게 사용하는지 자세히 알아보기 전에, ThemeData가 무엇인지 먼저 살펴보려고 한다. ThemeData는 Flutter 앱의 Material Deisgn의 디자인과 동작을 정의하는 클래스이다. ThemeData를 이용해 앱 전반에 걸친 색상, 타이포그래피, 위젯의 모양, 스타일 등을 일관성 있게 지정하고 관리할 수 있도록 한다.

주요 요소

• Color Scheme

앱의 기본 색상 팔레트를 정의한다.

Property	Description
primary	앱의 주요 요소의 색상
onPrimary	primary 색상 위에 올라가는 텍스트 및 아이콘 등의 색상
surface	앱 화면의 전체 기본 배경색
onSurface	surface 색상 위에 올라가는 텍스트 및 아이콘 등의 색상
secondary	보조 요소에서 사용되는 강조 색상
onSecondary	secondary 색상 위에 올라가는 텍스트나 아이콘의 색상
error	경고나 에러 메시지에 사용되는 색상
onError	error 색상 위에 올라가는 텍스트나 아이콘의 색상
primaryContainer	Material 3 (M3)에서 primay와 연관된 밝은 컨테이너 배경색
onPrimaryContainer	primaryContainer 위에 올라가는 텍스트 및 아이콘 등의 색상
outline	입력 필드, 카드 등의 구성 요소 테두리 색상
shadow	위젯의 그림자 색상을 정의
tertiary	primary, secondary 다음으로 세번째 강조 색상
onTertiary	tertiary 색상 위에 올라가는 텍스트 및 아이콘의 색상

• Typography

앱 전반에 사용되는 텍스트의 기본 스타일을 정의한다.

Property	Description
displayLarge / displayMedium / displaySmall	display 텍스트 스타일 정의
headlineLarge / headlineMedium / headlineSmall	headline 텍스트 스타일 정의
titleLarge / titleMedium / titleSmall	title 텍스트 스타일 정의
bodyLarge / bodyMedium / bodySmall	body 텍스트 스타일 정의
labelLarge / lableMedium / labelSmall	label 텍스트 스타일 정의

 

Typography 속성은 정의 해 둔 뒤, html의 h1, h2... 를 사용하듯이 사용하는 Text 위젯에서 해당 스타일 사용을 설정해 줘야 한다.

Text(
  'Display Text', 
  style: Theme.of(context).textTheme.titleLarge,
)

• Widget Theme

특정 위젯의 기본 스타일을 정의한다. 따라서 위젯마다 설정을 해줘야 한다.

ElevatedButton

elevatedButtonTheme: ElevatedButtonThemeData(
	style: ElevatedButton.styleFrom(
	backgroundColor: Colors.black,
	foregroundColor: Colors.white,
	),
)

AppBar

appBarTheme: const AppBarTheme(
	backgroundColor: Colors.white,
	foregroundColor: Colors.black,
	elevation: 0,
)

• Brightness

테마가 Light 모드인지 Dark 모드인지를 명시한다. MaterialApp에서 라이트와 다크 모드 모두를 정의한다면, theme과 darkTheme 속성을 모두 사용해 설정해 주면 된다.

MaterialApp(
	theme: ThemeData(brightness : Brightness.light, ...),
	darkTheme: Themedata(brightness : Brightness.dart, ...),
	...
)

ThemeData 사용 추천 로드맵

• ColorTheme

가장 먼저, ColorTheme 사용해 보는 것으로 ThemeData를 사용하는 것을 추천한다. 앱 전반에서 사용할 색상 몇가지를 추가한 뒤, 여러 구현을 해보다가 특정 부분에서 원하는 색상이 나오지 않을 때 추가로 필요한 속성을 찾아 추가해주면 된다.

• Typography

그 다음, 혹은 동시에 시도하면 좋을 것이 Typography이다. 앱 전반에서 사용할 폰트와 사이즈, 색상 등을 설정해 두면 일관성 있는 UI 구현에 도움이 된다.

• Widget Theme

그 다음으로 Widget Theme을 설정해 보는 것이다. 모달창, 카드 등 자주 사용하는 요소들이 있을 것이다. 이런 것을 한 곳에서 설정해 두면 수정할 때, ThemeData를 이용해 일괄적으로 수정할 수 있어 편리해진다.