[flutter] Redux를 사용하여 플러터 앱의 테마를 동적으로 변경하는 방법은 무엇인가요?

플러터는 Redux라는 상태 관리 라이브러리를 사용하여 앱의 상태를 효과적으로 관리할 수 있습니다. Redux를 사용하면 플러터 앱에서 테마를 동적으로 변경할 수도 있습니다. 이번 글에서는 Redux를 사용하여 앱의 테마를 변경하는 방법에 대해 알아보겠습니다.

Redux 및 앱 상태 설정하기

먼저, Redux를 사용하여 앱의 전역 상태를 관리할 준비를 해야합니다. 앱의 상태를 위한 Redux store를 설정한 다음, 앱의 초기 상태와 상태 변경 액션을 정의합니다. 아래는 Redux를 사용한 앱 상태의 예시입니다:

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

// 앱의 초기 상태
class AppState {
  ThemeData themeData;

  AppState({this.themeData});

  factory AppState.initialState() =>
      AppState(themeData: ThemeData.light()); // 초기 테마는 light theme로 설정
}

// 테마 변경 액션
class ChangeThemeAction {
  final ThemeData newThemeData;

  ChangeThemeAction(this.newThemeData);
}

// 앱의 상태와 액션을 관리하는 리듀서
AppState appReducer(AppState state, dynamic action) {
  if (action is ChangeThemeAction) {
    return AppState(themeData: action.newThemeData);
  }

  return state;
}

// Redux Store 생성
final store = Store<AppState>(
  appReducer,
  initialState: AppState.initialState(),
);

테마 변경 위젯 만들기

이제 Redux store를 설정했으므로, 테마를 변경할 위젯을 만들어야 합니다.

class ThemeToggleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, ThemeData>(
        converter: (store) => store.state.themeData,
        builder: (context, themeData) {
          return RaisedButton(
            onPressed: () {
              // 테마 변경 액션 디스패치
              store.dispatch(ChangeThemeAction(
                  themeData == ThemeData.light() ? ThemeData.dark() : ThemeData.light()));
            },
            child: Text('Toggle Theme'),
          );
        });
  }
}

위 예제에서는 StoreConnector 위젯을 사용하여 앱의 상태와 테마 데이터를 가져오고, RaisedButton 위젯을 통해 테마를 토글하는 기능을 구현합니다. onPressed 핸들러에서는 테마 변경 액션을 store.dispatch를 통해 디스패치합니다.

앱에 테마 변경 위젯 추가하기

이제 앱에 테마 변경 위젯을 추가해보겠습니다. 이 예제에서는 앱의 AppBar 위젯에 테마 변경 위젯을 추가합니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Redux Theme Example',
      theme: store.state.themeData, // 현재 테마 적용
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Redux Theme Example'),
          actions: [
            ThemeToggleWidget(), // 테마 변경 위젯 추가
          ],
        ),
        body: Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

MyApp 위젯에서는 ThemeToggleWidgetAppBar 위젯의 actions에 추가함으로써 테마 변경 버튼을 표시합니다.

이제 앱을 실행하고 테마 변경 버튼을 클릭해볼 수 있습니다. 버튼을 클릭할 때마다 앱의 테마가 토글되며, 상태의 변화에 따라 앱의 테마가 동적으로 변경되는 것을 확인할 수 있습니다.

이렇게 Redux를 사용하여 플러터 앱의 테마를 동적으로 변경하는 방법을 알아보았습니다. Redux 라이브러리를 사용하면 앱의 상태 관리를 효과적으로 할 수 있으므로, 테마 관리 외에도 다양한 기능에 적용할 수 있습니다.

참고 자료: