[flutter] 플러터 Riverpod에서의 테마 설정 방법

30 Nov 2023

flutter

플러터(Riverpod)는 효율적인 상태 관리 라이브러리이며, 앱의 테마를 설정하는 것도 매우 중요합니다. 이번 블로그 포스트에서는 Riverpod를 사용하여 플러터 앱의 테마를 설정하는 방법에 대해 알아보겠습니다.

1. `ProviderContainer` 만들기

먼저, ProviderContainer를 만들어 앱의 테마를 전역으로 관리할 수 있도록 설정해야 합니다. Riverpod는 상태 관리에 ProviderContainer를 사용합니다.

final themeProvider = StateProvider<ThemeData>((ref) {
  return ThemeData.light(); // 기본 테마 설정
});

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

위의 코드에서 themeProvider는 앱의 테마에 대한 상태를 제공하는 StateProvider입니다. MyApp 위젯은 플러터 앱의 진입점입니다.

2. 테마 변경

앱의 테마를 변경하려면 themeProvider의 값을 업데이트해야 합니다. 예를 들어, 다크 테마로 변경하려면 다음과 같이 코드를 작성할 수 있습니다.

final themeProvider = StateProvider<ThemeData>((ref) {
  return ThemeData.light(); // 기본 테마 설정
});

class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final theme = watch(themeProvider).state;

    return MaterialApp(
      theme: theme, // 테마 설정
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    return Scaffold(
      appBar: AppBar(
        title: Text('테마 설정 예제'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 테마 변경
            context.read(themeProvider).state = ThemeData.dark();
          },
          child: Text('다크 테마로 변경'),
        ),
      ),
    );
  }
}

위의 코드에서 themeProvider의 값을 변경하기 위해 context.read(themeProvider).state를 사용합니다. 앱에서 다크 테마로 변경하려면 버튼을 누르면 ElevatedButton 위젯이 렌더링됩니다. 버튼을 클릭하면 themeProvider의 상태가 업데이트되어 테마가 변경됩니다.

이제 Riverpod를 사용하여 플러터 앱에서 테마를 설정하는 방법에 대해 알게 되었습니다. 이를 활용하여 앱의 테마를 동적으로 변경할 수 있습니다.

더 자세한 정보는 공식 Riverpod 문서를 참조하세요.

1. ProviderContainer 만들기

2. 테마 변경

1. `ProviderContainer` 만들기