Flutter 다크모드 라이트모드 Provider로 구현 – 플러터 디자인 (2)

플러터 애플리케이션에서 다크모드와 라이트모드를 손쉽게 전환할 수 있습니다. 이 글에서는 Flutter 다크모드를 Provider를 사용하여 구현하는 방법을 단계별로 설명합니다.

Flutter 다크모드

다크모드는 화면의 밝기를 낮춰서 사용자가 눈의 피로를 덜 느끼도록 해주는 기능입니다. 라이트모드는 그 반대로 밝은 화면을 제공합니다. 두 모드를 지원하면 사용자가 자신의 선호에 따라 화면 모드를 변경할 수 있습니다.

Provider 설치 및 설정

먼저 pubspec.yaml 파일에 provider 패키지를 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
    provider: ^6.1.2

테마 데이터 정의하기

이제 다크모드와 라이트모드에 사용될 테마 데이터를 정의합니다.

import 'package:flutter/material.dart';

final ThemeData lightTheme = ThemeData(
  primarySwatch: Colors.blue,
  brightness: Brightness.light,
);

final ThemeData darkTheme = ThemeData(
  primarySwatch: Colors.blue,
  brightness: Brightness.dark,
);

ChangeNotifier 클래스 구현

다음으로, 테마 모드를 관리할 ChangeNotifier 클래스를 구현합니다:

import 'package:flutter/material.dart';

class ThemeNotifier extends ChangeNotifier {
  ThemeData _currentTheme;
  bool _isDarkMode;

  ThemeNotifier(this._isDarkMode) {
    _currentTheme = _isDarkMode ? darkTheme : lightTheme;
  }

  ThemeData get currentTheme => _currentTheme;
  bool get isDarkMode => _isDarkMode;

  void toggleTheme() {
    _isDarkMode = !_isDarkMode;
    _currentTheme = _isDarkMode ? darkTheme : lightTheme;
    notifyListeners();
  }
}

Provider로 테마 전환 상태 관리하기

테마 관리 클래스를 앱 전체에서 사용할 수 있도록 MultiProvider를 설정합니다.

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

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => ThemeNotifier(false), // 기본 테마를 라이트모드로 설정
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<ThemeNotifier>(
      builder: (context, themeNotifier, child) {
        return MaterialApp(
          theme: themeNotifier.currentTheme,
          home: HomeScreen(),
        );
      },
    );
  }
}

홈 스크린 구현 및 테마 전환 버튼 추가

테마를 전환할 수 있는 버튼을 포함한 홈 스크린을 구현합니다.

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

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

    return Scaffold(
      appBar: AppBar(
        title: Text(
          themeNotifier.isDarkMode ? "Dark Mode" : "Light Mode",
          style: TextStyle(
              color: themeNotifier.isDarkMode
                  ? Colors.white
                  : Colors.grey.shade900),
        ),
        actions: [
          Switch(
            value: themeNotifier.isDarkMode,
            onChanged: (value) {
              themeNotifier.toggleTheme();
            },
            activeTrackColor: Colors.lightBlueAccent,
            activeColor: Colors.blue,
          ),
        ],
      ),
    );
  }
}