[flutter] 플러터 Drawer에서 사용자가 선호하는 테마 모드를 선택하는 방법은?

07 Dec 2023

flutter

플러터에서 Drawer는 앱의 네비게이션 메뉴를 제공하는데 사용되는 중요한 위젯입니다. 사용자가 앱 내에서 선호하는 테마 모드를 선택할 수 있도록 Drawer에 이 기능을 추가하는 방법에 대해 알아보겠습니다.

먼저, 플러터에서 테마 모드를 관리하기 위해 Theme 클래스를 사용합니다. Theme 클래스는 앱의 전역 테마 설정을 관리하는 역할을 합니다. 사용자가 선택한 테마 모드를 저장하고 다른 위젯에서 이 값을 참조할 수 있도록 ThemeProvider를 사용하여 테마 모드를 관리할 수 있습니다.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<ThemeProvider>(
      create: (_) => ThemeProvider(),
      child: Consumer<ThemeProvider>(
        builder: (context, themeProvider, _) {
          return MaterialApp(
            theme: themeProvider.getTheme(),
            home: MyHomePage(),
          );
        },
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      drawer: DrawerWidget(),
      body: Container(
        // 앱의 내용
      ),
    );
  }
}

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

    return Drawer(
      child: ListView(
        children: [
          ListTile(
            title: Text('라이트 모드'),
            leading: Icon(Icons.brightness_5),
            onTap: () {
              themeProvider.setLightMode();
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: Text('다크 모드'),
            leading: Icon(Icons.brightness_2),
            onTap: () {
              themeProvider.setDarkMode();
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

class ThemeProvider extends ChangeNotifier {
  ThemeData _currentTheme = ThemeData.light();

  ThemeData getTheme() => _currentTheme;

  void setLightMode() {
    _currentTheme = ThemeData.light();
    notifyListeners();
  }

  void setDarkMode() {
    _currentTheme = ThemeData.dark();
    notifyListeners();
  }
}

위의 예시 코드에서는 사용자가 라이트 모드 또는 다크 모드를 선택할 수 있는 ListTile을 Drawer 위젯 내에 생성하였습니다. 각 ListTile을 클릭하면 해당 테마 모드를 ThemeProvider를 통해 설정하고 Drawer를 닫습니다.

ThemeProvider 클래스는 ChangeNotifier를 상속하여 테마 모드의 변경을 감지하고 모든 구독자에게 알립니다. 각 구독자는 Consumer를 통해 테마 모드를 감지하고 화면을 업데이트합니다.

위의 예시 코드를 사용하여 플러터 Drawer에서 사용자가 선호하는 테마 모드를 선택할 수 있습니다. 이를 응용하여 필요한 추가 기능을 구현하거나 UI를 개선할 수 있습니다.