Flutter에서 다크 모드 간단하게 구현해보기

728x90

모바일 앱에서 다크 모드는 사용자 경험을 향상시키는 중요한 요소 중 하나입니다. 다크 모드는 눈의 피로를 줄여주고 배터리 소모도 절감해 주는 장점이 있어 많은 사용자들에게 선호됩니다. Flutter는 다크 모드 기능을 매우 간단하게 구현할 수 있는 기능을 제공하고 있습니다. 이번 글에서는 Flutter에서 다크 모드를 쉽게 구현하는 방법을 살펴보겠습니다.

1. 다크 모드란?

다크 모드는 화면 배경을 어두운 색으로 변경하여 밝은 색의 텍스트와 UI 요소를 사용하는 모드입니다. 특히, OLED 화면에서는 다크 모드가 배터리 절약에 효과적이며, 낮은 조명 환경에서 눈의 피로를 줄여주는 역할을 합니다. 이런 이유로 다크 모드를 앱에 적용하는 것은 많은 사용자들에게 필수적인 기능이 되었습니다.

2. Flutter에서 다크 모드 지원

Flutter는 기본적으로 다크 모드를 쉽게 구현할 수 있는 구조를 가지고 있습니다. Flutter의 MaterialApp에서 ThemeData를 통해 밝은 모드와 어두운 모드를 정의할 수 있으며, 시스템 설정에 따라 자동으로 모드를 전환할 수도 있습니다.

3. 다크 모드 구현 방법

Flutter에서 다크 모드를 적용하는 가장 간단한 방법은 MaterialApp에서 테마를 설정하는 것입니다. 아래 코드는 다크 모드와 라이트 모드를 모두 지원하는 앱을 구현하는 기본적인 예시입니다.

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(
        primarySwatch: Colors.blue,
        brightness: Brightness.light, // 기본 밝은 모드 테마
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark, // 다크 모드 테마
      ),
      themeMode: ThemeMode.system, // 시스템 설정에 따라 다크/라이트 모드 전환
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 다크 모드 구현'),
      ),
      body: Center(
        child: Text('다크 모드가 적용된 앱'),
      ),
    );
  }
}

이 코드는 MaterialApp에서 theme, darkTheme, themeMode 세 가지 속성을 사용하여 다크 모드를 처리하는 예시입니다.

theme: 라이트 모드에 사용할 테마를 정의합니다.
darkTheme: 다크 모드에 사용할 테마를 정의합니다.
themeMode: 앱의 모드가 라이트 모드 또는 다크 모드로 전환되는 방식을 결정합니다. ThemeMode.system으로 설정하면 사용자의 시스템 설정에 따라 자동으로 다크 모드와 라이트 모드를 전환합니다.

4. 테마 세부 설정

다크 모드에서의 디자인을 더욱 세부적으로 설정하고 싶다면, ThemeData 내에서 다양한 스타일을 설정할 수 있습니다. 예를 들어, 텍스트의 색상이나 버튼의 스타일을 다크 모드에서 다르게 적용할 수 있습니다.

darkTheme: ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.grey[900],
  accentColor: Colors.blue[200],
  textTheme: TextTheme(
    bodyText1: TextStyle(color: Colors.white),
    bodyText2: TextStyle(color: Colors.white70),
  ),
  buttonTheme: ButtonThemeData(
    buttonColor: Colors.blue[200],
    textTheme: ButtonTextTheme.primary,
  ),
),

위 코드는 다크 모드에서 기본 텍스트 색상을 흰색으로 설정하고, 버튼의 색상을 밝은 파란색으로 설정한 예시입니다. 앱의 전반적인 스타일을 사용자 지정하여 다크 모드에서도 일관되고 사용하기 좋은 UI를 제공할 수 있습니다.

5. 사용자 정의 테마 전환

만약 앱에서 사용자가 직접 라이트 모드와 다크 모드를 선택할 수 있도록 하고 싶다면, themeMode를 ThemeMode.light나 ThemeMode.dark로 변경하는 방식으로 제어할 수 있습니다. 이를 위해서는 상태 관리가 필요합니다. 아래는 간단한 상태 관리를 통해 테마를 변경하는 방법입니다.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isDarkMode = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
      ),
      themeMode: _isDarkMode ? ThemeMode.dark : ThemeMode.light,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter 다크 모드 구현'),
          actions: [
            Switch(
              value: _isDarkMode,
              onChanged: (value) {
                setState(() {
                  _isDarkMode = value;
                });
              },
            )
          ],
        ),
        body: Center(
          child: Text('다크 모드를 테스트해보세요'),
        ),
      ),
    );
  }
}

이 코드는 스위치를 통해 사용자가 직접 테마를 전환할 수 있도록 구현한 예시입니다. 사용자는 앱의 설정에서 다크 모드와 라이트 모드를 선택할 수 있으며, 선택한 모드는 즉시 반영됩니다.

6. 다크 모드 디자인 시 고려 사항

다크 모드를 구현할 때, 몇 가지 디자인 원칙을 기억하는 것이 중요합니다. 다크 모드에서는 일반적으로 텍스트와 배경 사이의 대비가 더 강해야 하며, 사용자가 정보를 쉽게 읽을 수 있도록 해야 합니다. 너무 강한 색상은 피하고, 눈의 피로를 최소화할 수 있는 부드러운 색상을 사용하는 것이 좋습니다.

명암비: 텍스트와 배경 간의 명암비를 적절하게 설정해 가독성을 유지해야 합니다.
색상 선택: 주로 검정, 회색, 어두운 파란색 등을 사용하되, 강조 요소는 밝은 색상을 사용하여 시각적 관심을 유도할 수 있습니다.
시각적 일관성: 다크 모드와 라이트 모드 모두에서 UI의 일관성을 유지해야 합니다.

결론

Flutter에서 다크 모드를 구현하는 것은 매우 간단하며, MaterialApp의 테마 속성만으로도 쉽게 설정할 수 있습니다. 다크 모드는 사용자 경험을 향상시키고, 앱을 더 매력적으로 만들어 줄 수 있는 중요한 기능 중 하나입니다. 시스템 설정에 맞춰 자동으로 다크 모드를 적용하거나, 사용자 정의 전환 기능을 제공해 사용자 경험을 향상시키고 유저들로부터 더 긍정적인 피드백을 받는데 도움이 되셨으면 좋겠습니다.