[flutter] 훅(hook)을 사용하여 플러터 앱의 테마를 변경하는 방법

14 Dec 2023

flutter

플러터(Flutter) 앱을 개발하다 보면 테마를 동적으로 변경해야 하는 경우가 있습니다. 훅(hook)을 사용하여 플러터 앱의 테마를 변경하는 방법을 알아보겠습니다.

1. 테마 설정

우선, main.dart 파일에서 앱의 기본 테마를 설정합니다. 예를 들어, 밝은 및 어두운 모드를 지원하는 앱을 개발한다고 가정해봅시다.

MaterialApp(
  theme: ThemeData.light(), // 밝은 모드 테마
  darkTheme: ThemeData.dark(), // 어두운 모드 테마
  themeMode: themeMode, // 테마 모드 (밝은 모드, 어두운 모드, 시스템)
  home: MyHomePage(),
);

앱의 기본 테마를 설정한 후, 앱 내에서 테마를 동적으로 변경할 수 있는 훅을 구현합니다.

2. 테마 변경 훅(Hook) 구현

useDynamicTheme라는 훅을 구현하여 테마를 동적으로 변경할 수 있습니다.

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

ThemeData useDynamicTheme() {
  final themeMode = useValueNotifier(ThemeMode.system); // 테마 모드 상태
  return themeMode.value == ThemeMode.light ? ThemeData.light() : ThemeData.dark();
}

이 훅은 현재 테마 모드 상태를 반환합니다. 이제 이 훅을 사용하여 앱 내에서 테마를 동적으로 변경할 수 있습니다.

3. 테마 적용

이제 앱 내에서 useDynamicTheme 훅을 사용하여 테마를 동적으로 변경할 수 있습니다.

Widget build(BuildContext context) {
  final theme = useDynamicTheme(); // 동적 테마 적용
  return MaterialApp(
    theme: theme,
    home: MyHomePage(),
  );
}

위의 단계를 따라 훅을 사용하여 플러터 앱의 테마를 동적으로 변경할 수 있습니다. 동적으로 변경할 수 있는 테마를 활용하여 사용자 경험을 향상시킬 수 있습니다.

매개변수에 따라 테마를 반환하는 훅의 구현에 대한 자세한 내용은 공식 플러터 문서를 참조하세요.