[flutter] 플러터에서 useContext 훅(hook)을 이용한 테마 전환 기능 구현하기

14 Dec 2023

flutter

플러터(Flutter) 앱을 개발할 때, 테마 전환 기능은 사용자 경험을 향상시키는 데 중요한 부분입니다. useContext 훅을 이용하면 플러터 앱에서 테마 전환 기능을 간단하게 구현할 수 있습니다. 이 기능은 사용자가 화면을 어둡게 하는 다크 모드 또는 다시 밝게 하는 라이트 모드로 전환할 수 있는 기능을 제공합니다.

useContext 훅이란?

React에서 가져온 useContext 훅은 Flutter Hooks 라이브러리를 이용해 플러터 앱에서 상태를 관리할 수 있게 해줍니다. 이를 이용해 앱 전역에서 테마를 관리하고 테마 전환 기능을 구현할 수 있습니다.

테마 전환 기능 구현하기

다음은 useContext 훅을 이용한 테마 전환 기능을 구현하는 간단한 예제입니다.

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 ThemeData theme = useMemoized(() {
      return ThemeData(
        brightness: useValueListenable(isDarkMode) ? Brightness.dark : Brightness.light,
        // 기타 테마 속성들...
      );
    });

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

var isDarkMode = ValueNotifier<bool>(false);

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('테마 전환'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('테마 전환하기'),
          onPressed: () {
            isDarkMode.value = !isDarkMode.value;
          },
        ),
      ),
    );
  }
}

결론

이제 useContext 훅을 이용해서 플러터 앱에서 간단히 테마 전환 기능을 구현하는 방법을 알아보았습니다. 이를 응용하여 사용자에게 다양한 테마 옵션을 제공하고 더 나은 사용자 경험을 제공할 수 있습니다.

현대의 앱은 사용자들이 선호하는 테마를 선택할 수 있도록 해주는 것이 중요합니다. useContext 훅을 이용하면 테마 전환 기능을 비교적 쉽게 구현할 수 있고, 사용자들에게 보다 많은 선택권을 제공할 수 있습니다.

참고 자료: