플러터 앱에서 테마는 사용자 경험에 큰 영향을 미치는 중요한 부분입니다. 사용자에게 어두운 또는 밝은 모드를 선택할 수 있는 옵션을 제공하는 것은 극히 중요합니다. 이번에는 flutter_hooks 패키지를 사용하여 간단한 방법으로 앱의 테마를 변경하는 방법을 알아보겠습니다.

기존 테마 설정

우선, MaterialApp 위젯에서 기본 테마를 설정합니다.

return MaterialApp(
  theme: ThemeData.light(), // 밝은 모드
  darkTheme: ThemeData.dark(), // 어두운 모드
  themeMode: themeMode, // 사용자가 선택한 모드에 따라 테마 모드 설정
  home: MyHomePage(),
);

훅을 활용한 테마 변경

이제 flutter_hooks 패키지를 사용하여 테마를 변경합니다. useTheme 훅을 사용하여 현재 테마 정보를 가져올 수 있습니다.

ThemeData theme = useTheme();

이제 이 theme을 사용하여 앱 전체적으로 적용합니다.

return MaterialApp(
  theme: theme,
  home: MyHomePage(),
);

그런 다음 사용자가 선택한 모드에 따라 테마를 업데이트하는 함수를 만듭니다.

void _updateTheme(bool isDarkMode) {
  if (isDarkMode) {
    // 어두운 테마로 변경
    ThemeManager.setTheme(ThemeData.dark());
  } else {
    // 밝은 테마로 변경
    ThemeManager.setTheme(ThemeData.light());
  }
}

마치며

이제 flutter_hooks 패키지를 사용하여 간단하게 앱의 테마를 변경하는 방법을 살펴보았습니다. 사용자에게 어두운 모드와 밝은 모드를 선택할 수 있도록 옵션을 제공함으로써 사용자의 선호에 맞는 테마를 선택할 수 있습니다.

Reference:

• flutter_hooks package
• Flutter documentation