[flutter] shared_preferences를 통해 앱 내에서 사용자가 선택한 테마를 저장하는 방법은?

15 Dec 2023

flutter

Flutter 앱을 개발할 때 사용자가 선택한 테마를 저장하고 나중에 불러와 사용할 수 있도록 하는 것은 매우 중요합니다. 여러가지 방법이 있지만, 이 포스트에서는 shared_preferences 패키지를 사용하여 이 기능을 구현하는 방법을 알아보겠습니다.

1. shared_preferences 패키지 추가하기

먼저 pubspec.yaml 파일에 shared_preferences 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.6

그리고 터미널에서 다음 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

2. 테마 선택을 저장하고 불러오기

이제 테마 선택을 저장하고 불러오기 위한 유틸리티 클래스를 만들어봅시다.

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

class ThemePreferences {
  static const String key = 'theme_key';

  static Future<void> setTheme(ThemeMode themeMode) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setInt(key, themeMode.index);
  }

  static Future<ThemeMode> getTheme() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    int themeIntValue = prefs.getInt(key) ?? ThemeMode.system.index;
    return ThemeMode.values[themeIntValue];
  }
}

위 코드에서 ThemePreferences 클래스는 테마를 저장하고 불러오기 위한 메서드를 제공합니다. setTheme 메서드는 사용자가 선택한 테마를 저장하고, getTheme 메서드는 저장된 테마를 불러옵니다.

3. 테마 적용하기

마지막으로, 앱 전체에서 테마를 적용해야 합니다.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<ThemeMode>(
      future: ThemePreferences.getTheme(),
      builder: (context, snapshot) {
        return MaterialApp(
          themeMode: snapshot.hasData ? snapshot.data : ThemeMode.system,
          theme: ThemeData.light(),
          darkTheme: ThemeData.dark(),
          home: MyHomePage(),
        );
      },
    );
  }
}

위 코드는 앱이 실행될 때 저장된 테마를 불러와 적용하는 예제입니다.

이제 테마를 저장하고 불러오는 과정을 shared_preferences를 통해 구현하는 방법을 알아보았습니다. 여러분의 Flutter 앱에 테마 저장 기능을 추가해보세요!