[flutter] 플러터에서의 bloc 패턴으로 앱의 테마 변경하기

20 Dec 2023

flutter

플러터 애플리케이션에서 테마를 변경하는 일은 사용자 경험을 향상시키는 데 중요합니다. 이를 위해 Bloc 패턴을 사용하여 테마를 동적으로 변경하는 방법을 알아보겠습니다.

Bloc 패턴 소개

Bloc은 Business Logic Component의 약자로, UI와 비즈니스 로직을 분리하여 관리하는 디자인 패턴입니다. 이를 사용하면 애플리케이션의 상태를 효율적으로 관리할 수 있고, 다양한 UI 요소 간의 데이터 흐름을 관리할 수 있습니다.

앱 테마 동적으로 변경하기

Bloc 패턴을 사용하여 앱의 테마를 동적으로 변경하려면 먼저 theme_bloc을 생성해야 합니다.

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

enum ThemeEvent { toggle }

class ThemeBloc extends Bloc<ThemeEvent, ThemeData> {
  @override
  ThemeData get initialState => ThemeData.light();
  @override
  Stream<ThemeData> mapEventToState(ThemeEvent event) async* {
    if (event == ThemeEvent.toggle) {
      yield state.brightness == Brightness.dark
          ? ThemeData.light()
          : ThemeData.dark();
    }
  }
}

위 코드에서는 ThemeBloc 클래스를 생성하고, ThemeData를 이용하여 앱의 라이트 테마와 다크 테마를 토글할 수 있도록 구현되어 있습니다.

이제 main.dart에서 Bloc Provider를 설정하고, 테마를 사용할 화면에서 BlocBuilder를 이용하여 Bloc의 상태를 감지하고 테마를 변경할 수 있습니다.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => ThemeBloc(),
      child: BlocBuilder<ThemeBloc, ThemeData>(
        builder: (context, theme) {
          return MaterialApp(
            theme: theme,
            // 앱의 나머지 내용
          );
        },
      ),
    );
  }
}

마치며

Bloc 패턴을 사용하여 플러터 애플리케이션의 테마를 동적으로 변경하는 방법에 대해 살펴보았습니다. Bloc 패턴을 사용하면 앱의 상태를 효율적으로 관리하고, 테마 변경과 같은 복잡한 기능을 간단하게 구현할 수 있습니다.

플러터에서의 Bloc 패턴을 통해 앱의 테마를 동적으로 변경하는 방법에 대해 더 알아보고 싶다면 Bloc 패턴에 대한 자세한 내용을 살펴보시길 권장합니다.