[flutter] 플러터에서 useTheme 훅(hook)을 이용한 테마 스위칭

14 Dec 2023

flutter

플러터(Flutter) 앱을 개발할 때 앱의 테마를 동적으로 변경하는 것은 사용자 경험을 향상시키는 데 중요합니다. 테마를 변경하는 가장 간단한 방법 중 하나는 useTheme 훅을 사용하여 테마 스위칭을 구현하는 것입니다. 이 기능을 통해 앱 사용자는 테마를 자유롭게 변경하여 앱을 더 맞춤화하거나 시각적으로 흥미로운 경험을 할 수 있습니다.

테마 스위칭 기능 구현하기

먼저, 플러터에서 제공하는 useTheme 훅을 이용하여 테마 스위칭 기능을 구현해보겠습니다.

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

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

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final isDarkTheme = useState(false);

    return MaterialApp(
      theme: isDarkTheme.value ? ThemeData.dark() : ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(
          title: Text('테마 스위칭 테스트'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Switch(
                value: isDarkTheme.value,
                onChanged: (newValue) {
                  isDarkTheme.value = newValue;
                },
              ),
              Text(
                isDarkTheme.value ? '다크 모드' : '라이트 모드',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서 useState 훅을 사용하여 isDarkTheme 변수를 선언하고, 해당 상태를 토글할 수 있는 Switch 위젯을 구현했습니다. 사용자가 스위치를 조작하면 isDarkTheme 상태가 변경되어 앱의 테마가 동적으로 변경됩니다.

마치며

플러터의 useTheme 훅은 테마 스위칭을 간편하게 구현할 수 있는 강력한 도구입니다. 사용자가 선호하는 테마를 선택할 수 있는 기능을 제공함으로써, 앱의 사용자들에게 더 나은 경험을 제공할 수 있습니다.

더 많은 정보를 원하시면 공식 플러터 문서를 참고하세요!