[flutter] 플러터에서 useTheme 훅(hook)을 이용한 앱 테마 동적 변경

14 Dec 2023

flutter

플러터(Flutter) 앱에서 앱 테마를 동적으로 변경하고 싶을 때, useTheme 훅을 사용할 수 있습니다. 이를 통해 테마를 변경할 때마다 화면이 다시 그려지고, 새로운 테마에 맞게 UI가 업데이트됩니다. 이번 블로그에서는 useTheme 훅을 활용하여 앱 테마를 동적으로 변경하는 방법을 알아보겠습니다.

useTheme 훅(hook) 이란?

useTheme 훅은 플러터의 후크(Hook) 시스템을 활용하여 앱 테마 정보에 접근할 수 있게 해줍니다. 이 훅을 이용하면 테마 데이터를 더 쉽게 조작하고 업데이트할 수 있습니다.

앱에서 useTheme 훅 사용하기

먼저, 앱 시작점에서 MaterialApp 위젯을 생성한 후, useTheme 훅을 사용하여 현재 테마를 가져올 수 있습니다. 이를 통해 현재 테마에 따라 UI를 조작하는 데 활용할 수 있습니다.

다음 예시 코드는 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 theme = useTheme();
    return MaterialApp(
      theme: theme,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final currentTheme = useTheme();
    return Scaffold(
      appBar: AppBar(
        title: Text('동적 테마 변경 예제'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('테마 변경'),
          onPressed: () {
            // 테마를 변경하는 로직
            context.read(themeProvider).changeTheme(currentTheme == ThemeMode.light ? ThemeMode.dark : ThemeMode.light);
          },
        ),
      ),
    );
  }
}

위 코드에서 MyApp 클래스에서 useTheme 훅을 사용하여 현재 앱 테마를 가져온 후, MaterialApp의 theme 속성에 대입함으로써 현재 테마를 설정합니다.

또한, MyHomePage 클래스에서는 useTheme 훅을 사용하여 현재 테마에 따라 UI를 업데이트하는 것을 볼 수 있습니다.

마치며

useTheme 훅을 이용하여 플러터(Flutter) 앱에서 앱 테마를 동적으로 변경하는 방법에 대해 알아보았습니다. 이를 통해 앱 사용자가 앱 테마를 개인화하고, UI를 보다 사용자 친화적으로 만들 수 있습니다. 제안 사항이 있다면, 언제든지 알려주세요!