[flutter] Riverpod를 사용하여 앱의 테마를 변경하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

Riverpod은 Flutter의 상태 관리 패키지 중 하나로, 앱의 테마를 변경하는 데 사용할 수 있습니다. 앱의 테마를 동적으로 변경하려면 다음 단계를 따르면 됩니다.

먼저, Riverpod 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.0

다음으로, main.dart 파일에서 riverpod 패키지를 가져옵니다:

import 'package:flutter_riverpod/flutter_riverpod.dart';

앱의 테마를 변경하려면, ProviderContainer를 사용하여 테마 상태를 관리합니다. main() 함수를 다음과 같이 수정합니다:

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

main.dart 파일에서 별도의 theme_provider.dart 파일을 생성합니다. 이 파일에는 테마 상태와 테마를 변경하는 로직이 포함됩니다.
theme_provider.dart 파일에서 다음과 같이 작성합니다:

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

// 테마 상태를 정의합니다
enum AppTheme { light, dark }

// 테마 상태를 제공하기 위한 프로바이더를 생성합니다
final themeProvider = StateProvider<AppTheme>((ref) => AppTheme.light);

// 테마에 따라서 변경되는 MaterialApp를 반환하는 위젯입니다
class ThemedApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.watch(themeProvider);

    return MaterialApp(
      theme: theme == AppTheme.light ? ThemeData.light() : ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

// 테마를 변경하기 위한 함수를 제공하는 메서드입니다
void changeTheme(BuildContext context, AppTheme theme) {
  context.read(themeProvider).state = theme;
}

이제 MyHomePage 위젯에서 테마를 변경할 버튼을 추가합니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('테마 변경 예제'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => changeTheme(context, AppTheme.light),
              child: Text('라이트 테마'),
            ),
            ElevatedButton(
              onPressed: () => changeTheme(context, AppTheme.dark),
              child: Text('다크 테마'),
            ),
          ],
        ),
      ),
    );
  }
}

이제 앱을 실행하고 테마 변경 버튼을 누르면 테마가 동적으로 변경될 것입니다.

Riverpod를 사용하여 앱의 테마를 변경하는 방법에 대해 간단하게 소개했습니다. 좀 더 복잡한 예제를 원한다면 Riverpod의 공식 문서를 참조하시기 바랍니다.