[flutter] 플러터 Riverpod를 이용한 다크 테마 전환 구현 방법

30 Nov 2023

flutter

안녕하세요! 이번 블로그에서는 플러터(Flutter) 앱에서 Riverpod를 이용하여 다크 테마 전환을 구현하는 방법에 대해 알아보겠습니다.

다크 테마는 사용자가 앱의 전체적인 디자인을 어둡게 변경할 수 있는 기능입니다. 이를 통해 사용자는 시간대에 따라 앱의 테마를 자동으로 전환하거나, 직접 설정하여 선호하는 테마를 사용할 수 있습니다.

Riverpod란?

Riverpod는 플러터에서 상태 관리를 위한 라이브러리 중 하나입니다. Provider 패턴 기반으로 동작하며, 의존성 주입과 상태 관리를 간편하게 처리할 수 있는 기능을 제공합니다.

다크 테마 구현하기

먼저, Riverpod를 프로젝트에서 사용할 수 있도록 pubspec.yaml 파일에 의존성을 추가해주세요. 아래 코드를 dependencies 섹션에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0

이제 다크 테마를 적용할 위젯을 생성해보겠습니다. MaterialApp 위젯을 사용하고, theme 프로퍼티에 ColorScheme.dark()를 설정하여 다크 테마를 적용할 수 있습니다.

import 'package:flutter/material.dart';

class DarkThemePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(
          title: Text('다크 테마'),
        ),
        body: Center(
          child: Text(
            '다크 테마를 사용하는 페이지 입니다.',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    );
  }
}

이제 다크 테마로 전환하기 위해 ChangeNotifier를 사용하여 상태를 관리해보겠습니다. ThemeProvider라는 클래스를 생성한 후, ChangeNotifier를 상속하도록 만들어줍니다.

import 'package:flutter/material.dart';

class ThemeProvider extends ChangeNotifier {
  bool _isDarkModeEnabled = false;
  bool get isDarkModeEnabled => _isDarkModeEnabled;

  void toggleDarkMode() {
    _isDarkModeEnabled = !_isDarkModeEnabled;
    notifyListeners();
  }
}

위와 같이 toggleDarkMode 메서드를 통해 다크 테마로 전환 여부를 토글할 수 있습니다. notifyListeners 메서드를 호출하여 상태 변경을 알려줍니다.

이제 플러터 앱을 시작하는 main.dart 파일에서 ProviderScope로 ThemeProvider를 감싸주겠습니다.

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

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DarkThemePage(), // 기본 테마를 설정한 페이지로 시작
    );
  }
}

마지막으로, 앱의 설정 화면에서 다크 테마 전환을 제공하는 스위치를 추가해보겠습니다. 이를 위해 ProviderListener를 사용하여 toggleDarkMode 메서드가 호출되면 테마가 변경되도록 설정해줍니다.

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

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('설정'),
      ),
      body: Center(
        child: Consumer(
          builder: (context, watch, _) {
            final themeProvider = watch(themeProvider);
            final isDarkModeEnabled = themeProvider.isDarkModeEnabled;

            return SwitchListTile(
              value: isDarkModeEnabled,
              onChanged: (value) {
                themeProvider.toggleDarkMode();
              },
              title: Text('다크 테마 전환'),
            );
          },
        ),
      ),
    );
  }
}

이제 앱의 설정 화면에서 다크 테마 전환을 토글할 수 있게 되었습니다. 테마 전환이 발생하면 자동으로 앱의 모든 위젯에 변경된 테마가 적용됩니다.

이것으로 플러터 Riverpod를 이용한 다크 테마 전환이 구현되었습니다. 여러분의 앱에 다크 테마를 추가해보세요!

정리

이번에는 플러터 Riverpod를 이용하여 다크 테마 전환을 구현하는 방법에 대해 알아보았습니다. Riverpod를 사용하면 편리하게 상태 관리를 할 수 있으며, 사용자가 원하는 테마로 앱을 커스텀할 수 있습니다. 플러터에서 Riverpod를 사용하여 다양한 기능을 추가해보세요!

Riverpod란?

다크 테마 구현하기

정리

참고 자료