Flutter의 라이트 모드(Light Mode) 지원 및 적용 방법

Flutter의 라이트 모드(Light Mode) 지원 및 적용 방법

Flutter에서 라이트 모드(Light Mode)는 기본적으로 적용되는 테마입니다. 하지만, 다크 모드를 지원하는 앱에서는 사용자가 라이트 모드를 직접 선택할 수 있도록 설정해야 할 수도 있습니다.

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

---

1. 라이트 모드란?

라이트 모드(Light Mode)는 밝은 배경을 사용하여 일반적인 앱 UI 환경을 제공하는 테마입니다. Flutter에서는 ThemeData를 활용하여 기본적인 라이트 모드를 설정할 수 있습니다.

라이트 모드를 유지하거나 사용자 설정을 통해 선택할 수 있도록 하면 다음과 같은 이점이 있습니다.

• 일관된 사용자 경험 제공: 기본적으로 많은 사용자들이 익숙한 환경
• 더 나은 가독성: 밝은 환경에서 텍스트가 잘 보이는 효과
• 유지보수 용이: 기본 테마가 Flutter의 디자인 가이드에 적합

---

2. Flutter에서 라이트 모드 적용하기

Flutter에서 라이트 모드를 적용하는 방법은 다음과 같습니다.

• 앱 전체 테마를 라이트 모드로 유지: 기본 라이트 모드를 설정
• 사용자가 직접 라이트 모드를 선택: 앱 내에서 옵션 제공

---

3. 기본 라이트 모드 설정

Flutter의 MaterialApp에서 theme을 설정하면 라이트 모드를 기본 테마로 유지할 수 있습니다.

(1) 라이트 모드 테마 적용

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Light Mode',
      theme: ThemeData( // 기본 라이트 모드 테마
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
      ),
      themeMode: ThemeMode.light, // 강제적으로 라이트 모드 설정
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter 라이트 모드")),
      body: Center(
        child: Text("이 앱은 라이트 모드로 고정되어 있습니다."),
      ),
    );
  }
}

설명:

• theme: 라이트 모드를 적용한 테마 설정
• themeMode: ThemeMode.light: 앱을 항상 라이트 모드로 유지

이제 앱은 강제로 라이트 모드에서 실행됩니다.

---

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 Light 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.light ? '라이트 모드' : '다크 모드'}"),
            Switch(
              value: themeProvider.themeMode == ThemeMode.light,
              onChanged: (value) {
                themeProvider.toggleTheme();
              },
            ),
          ],
        ),
      ),
    );
  }
}

설명:

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

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

---

5. 라이트 모드 적용 시 고려할 사항

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

• 색상 대비: 밝은 배경에서도 가독성이 유지되도록 적절한 색상 조합 선택
• 사용자 선택 유지: 사용자가 선택한 테마를 앱 재실행 후에도 유지되도록 SharedPreferences 활용
• 다크 모드와 일관된 스타일: 다크 모드와 동일한 UI 구조를 유지하면서 컬러만 변경

---

결론

Flutter에서 라이트 모드를 적용하면 사용자가 익숙한 UI 환경을 유지할 수 있으며, 앱의 가독성을 높일 수 있습니다.

• 테마 설정을 활용하여 기본 라이트 모드 적용
• 사용자가 직접 테마를 선택할 수 있도록 Provider 적용
• 가독성과 색상 대비를 고려하여 UI 최적화

이제 라이트 모드를 적용하여 더욱 깔끔한 Flutter 앱을 개발해 보세요!