[flutter] get_it를 사용하여 플러터 앱에서 테마와 스타일을 어떻게 적용하는가?

30 Nov 2023

flutter

먼저, get_it 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 get_it 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  get_it: ^6.0.0

이제 앱 테마와 스타일을 적용하기 위해 get_it를 활용하는 방법을 알아보겠습니다.

1. 테마 생성과 등록

먼저, Theme 클래스를 사용하여 테마를 생성합니다. 예를 들어, lightTheme과 darkTheme을 생성하고 관리하기 위해 ThemeService 클래스를 만들어보겠습니다.

class ThemeService {
  final GetIt _getIt = GetIt.instance;

  ThemeData _lightTheme = ThemeData.light();
  ThemeData _darkTheme = ThemeData.dark();

  void registerThemes() {
    _getIt.registerLazySingleton<ThemeData>(() => _lightTheme, instanceName: 'Light');
    _getIt.registerLazySingleton<ThemeData>(() => _darkTheme, instanceName: 'Dark');
  }

  ThemeData get lightTheme => _getIt.get<ThemeData>(instanceName: 'Light');
  ThemeData get darkTheme => _getIt.get<ThemeData>(instanceName: 'Dark');
}

위의 코드에서 ThemeService 클래스는 _lightTheme과 _darkTheme 이라는 두 개의 테마를 생성합니다. registerThemes() 메서드에서 get_it를 사용하여 두 테마를 등록합니다. 등록된 테마는 lightTheme과 darkTheme을 통해 접근할 수 있습니다.

2. 테마 적용

이제 앱 전체에 등록된 테마를 적용하는 방법을 알아보겠습니다.

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

class MyApp extends StatelessWidget {
  final ThemeService _themeService = GetIt.instance.get<ThemeService>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Theme Example',
      theme: _themeService.lightTheme, // default theme
      darkTheme: _themeService.darkTheme, // optional dark theme
      
      // ...
    );
  }
}

위의 코드에서 MyApp 클래스에서 ThemeService를 사용하여 등록된 테마를 가져옵니다. theme 속성에는 기본 테마를 적용하고, darkTheme 속성에는 선택적으로 다크 모드 테마를 적용할 수 있습니다.

이제 get_it를 사용하여 테마와 스타일을 효과적으로 관리할 수 있게 되었습니다. 다양한 테마와 스타일을 작성하여 앱의 디자인을 보다 유연하게 조정할 수 있습니다.

더 자세한 정보와 예제는 get_it 패키지의 공식 문서를 참고하시기 바랍니다.