아무리 기능이 좋아도 보기가 좋지 않으면 사용자에게 외면받게 됩니다.
Flutter에서는 기본적으로 다크모드, 라이트모드 테마를 쉽게 설정할 수 있는 기능을 제공합니다.
이번 글에서는 ThemeData, Brightness, ThemeMode를 활용해
앱에 통일된 디자인을 적용하고 다크모드를 지원하는 방법을 실습 예제로 알려드립니다.
🌗 다크모드란?
운영체제(OS) 설정에 따라 앱이 자동으로 라이트 모드 ↔ 다크 모드로 전환되는 기능입니다.
- 최근 앱들은 대부분 다크모드를 기본 지원
- 시력 보호, 배터리 절약, UX 향상 효과
- Flutter는 기본적으로 다크모드 감지를 지원함
📐 테마 구성 요소
ThemeData는 앱 전체 스타일을 정의할 수 있는 객체입니다.
주요 속성
| primaryColor | 앱 주요 색상 |
| scaffoldBackgroundColor | 전체 배경 색상 |
| textTheme | 텍스트 스타일 모음 |
| brightness | 라이트/다크 여부 (Brightness.light or dark) |
🛠️ 실습: 다크모드 + 테마 설정 To-do 앱 만들기
1️⃣ 기본 테마 정의
final ThemeData lightTheme = ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.indigo,
scaffoldBackgroundColor: Colors.white,
appBarTheme: AppBarTheme(
backgroundColor: Colors.indigo,
foregroundColor: Colors.white,
),
);
final ThemeData darkTheme = ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.deepOrange,
scaffoldBackgroundColor: Colors.black,
appBarTheme: AppBarTheme(
backgroundColor: Colors.black87,
foregroundColor: Colors.white,
),
);
2️⃣ 앱에 테마 적용
void main() {
runApp(TodoThemeApp());
}
class TodoThemeApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '다크모드 지원 할 일 앱',
theme: lightTheme,
darkTheme: darkTheme,
themeMode: ThemeMode.system, // 시스템 설정에 따라 자동 전환
home: TodoHomePage(),
);
}
}
3️⃣ 기존 To-do 앱에 적용할 변경 사항
기존의 위젯들에는 색상 지정 X,
Flutter 테마에서 자동 적용되도록 구성해야 합니다.
ElevatedButton(
onPressed: _addTodo,
child: Text('추가'),
),
TextField(
controller: _controller,
decoration: InputDecoration(
labelText: '할 일 입력',
border: OutlineInputBorder(),
),
),
👉 이런 형태로 작성하면, 테마 설정에 따라 색상이 자동으로 변합니다.
🌙 앱 미리보기 (UI 변화 예시)
| ☀️ 라이트모드 | 흰 배경 + 진한 텍스트 + 인디고 버튼 |
| 🌑 다크모드 | 검은 배경 + 밝은 텍스트 + 오렌지 버튼 |
🧠 마무리 요약
| ThemeData | 앱 전체 스타일 관리 |
| Brightness | 라이트/다크 설정 |
| ThemeMode.system | 사용자의 OS 설정에 맞춰 자동 전환 |
| primarySwatch | 주요 색상 테마 지정 |
| AppBarTheme, TextTheme | 세부 UI 요소 스타일 지정 가능 |
Flutter는 테마 설정만 잘 해도
앱의 분위기를 크게 개선할 수 있고,
다크모드 자동 대응으로 완성도 높은 앱을 만들 수 있습니다.