Flutter의 다크 모드(Dark Mode) 지원 방법과 적용하기

Flutter의 다크 모드(Dark Mode) 지원 방법과 적용하기

최근 많은 앱들이 다크 모드를 지원하고 있으며, 사용자의 눈 건강과 배터리 절약 측면에서 중요한 기능이 되었습니다. Flutter에서는 테마(ThemeData)를 활용하여 다크 모드를 쉽게 적용할 수 있으며, 시스템 설정에 따라 자동으로 변경되도록 설정할 수도 있습니다.

이 글에서는 Flutter에서 다크 모드를 지원하는 방법과 사용자가 다크 모드를 직접 선택할 수 있도록 설정하는 방법을 설명하겠습니다.

---

1. 다크 모드란?

다크 모드(Dark Mode)는 밝은 배경 대신 어두운 배경을 사용하여 눈의 피로를 줄이고, OLED 디스플레이에서는 배터리 사용량을 절감하는 효과가 있습니다.

Flutter에서는 ThemeData를 활용하여 다크 모드를 설정할 수 있으며, 시스템 설정을 감지하여 자동으로 변경할 수도 있습니다.

다크 모드를 적용하면 다음과 같은 이점이 있습니다.

• 눈 건강 보호: 어두운 환경에서 눈의 피로 감소
• 배터리 절약: OLED 디스플레이에서 전력 소모 감소
• 미적인 디자인: 세련된 UI 제공

---

2. Flutter에서 다크 모드 적용하기

Flutter에서 다크 모드를 적용하는 방법은 크게 두 가지입니다.

• 시스템 설정에 따라 자동 변경: 사용자의 기기 테마 설정을 감지하여 다크 모드 활성화
• 사용자가 직접 선택: 앱 내에서 다크 모드를 활성화할 수 있도록 옵션 제공

---

3. 시스템 설정에 따른 다크 모드 적용

Flutter의 MaterialApp에서 theme와 darkTheme을 설정하면, 사용자의 시스템 테마에 따라 자동으로 다크 모드가 적용됩니다.

(1) 다크 모드 테마 설정

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dark Mode',
      theme: ThemeData( // 기본 라이트 모드 테마
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData( // 다크 모드 테마
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      themeMode: ThemeMode.system, // 시스템 설정을 따라감
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("다크 모드 테스트")),
      body: Center(
        child: Text("현재 테마에 따라 화면이 변경됩니다."),
      ),
    );
  }
}

설명:

• theme: 기본(라이트) 테마 설정
• darkTheme: 다크 모드 테마 설정
• themeMode: ThemeMode.system: 사용자의 시스템 설정을 따라감

이제 사용자의 기기 설정에 따라 자동으로 다크 모드가 적용됩니다.

---

4. 사용자가 직접 다크 모드 설정

앱 내에서 사용자가 다크 모드를 직접 선택할 수 있도록 하려면 Provider 또는 GetX 같은 상태 관리 패턴을 사용할 수 있습니다.

(1) Provider를 사용한 다크 모드 설정

다음과 같이 ChangeNotifier를 사용하여 다크 모드를 변경할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => ThemeProvider(),
      child: MyApp(),
    ),
  );
}

class ThemeProvider extends ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.light;

  ThemeMode get themeMode => _themeMode;

  void toggleTheme() {
    _themeMode = _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);

    return MaterialApp(
      title: 'Flutter Dark Mode',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: themeProvider.themeMode,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);

    return Scaffold(
      appBar: AppBar(title: Text("사용자 다크 모드 설정")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("현재 테마: ${themeProvider.themeMode == ThemeMode.dark ? '다크 모드' : '라이트 모드'}"),
            Switch(
              value: themeProvider.themeMode == ThemeMode.dark,
              onChanged: (value) {
                themeProvider.toggleTheme();
              },
            ),
          ],
        ),
      ),
    );
  }
}

설명:

• ChangeNotifier를 사용하여 테마 상태 관리
• themeMode 값을 토글하여 다크/라이트 모드 전환
• Switch 위젯을 활용하여 사용자 선택 반영

이제 사용자가 스위치를 조작하면 다크 모드가 즉시 변경됩니다.

---

5. 다크 모드 적용 시 고려할 사항

다크 모드를 적용할 때는 다음과 같은 요소를 고려해야 합니다.

• 적절한 색상 대비: 다크 모드에서도 가독성을 유지하도록 색상을 조정
• 아이콘 및 이미지: 밝은 배경을 전제로 한 아이콘은 다크 모드에서 잘 보이지 않을 수 있음
• 상태 저장: 사용자가 선택한 모드가 앱을 다시 실행해도 유지되도록 SharedPreferences 활용

---

결론

Flutter에서 다크 모드를 적용하면 사용자 경험을 향상시키고, 트렌드에 맞는 UI를 제공할 수 있습니다.

• 테마 설정을 활용하여 자동 다크 모드 적용
• Provider를 활용하여 사용자가 직접 다크 모드 설정
• UI/UX 고려하여 최적화된 다크 모드 디자인 적용

이제 다크 모드를 적용하여 더욱 세련된 Flutter 앱을 개발해 보세요!