[flutter] shared_preferences를 이용하여 사용자가 선택한 앱 테마를 변경하는 방법은?

15 Dec 2023

flutter

앱의 테마를 변경하는 것은 사용자 경험에 매우 중요하며, shared_preferences 패키지를 사용하여 이를 수행할 수 있습니다. 이 패키지를 통해 사용자가 선택한 테마 설정을 저장하고, 앱이 다시 시작될 때 이 값을 읽어와서 적용할 수 있습니다.

shared_preferences 패키지 추가

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

dependencies:
  shared_preferences: ^2.0.6

이후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 가져옵니다.

테마 설정 저장

다음으로, 사용자가 선택한 테마를 shared_preferences를 사용하여 저장하는 코드를 작성합니다.

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

Future<void> setThemePreference(bool isDarkMode) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  prefs.setBool('isDarkMode', isDarkMode);
}

위의 코드를 통해 isDarkMode라는 키로 사용자가 선택한 테마를 저장할 수 있습니다.

테마 설정 불러오기

마지막으로, 앱을 시작할 때 저장된 테마 설정을 불러와서 적용하는 코드를 작성합니다.

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

Future<ThemeData> getSavedTheme() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  bool isDarkMode = prefs.getBool('isDarkMode') ?? false;
  
  if (isDarkMode) {
    return ThemeData.dark();
  } else {
    return ThemeData.light();
  }
}

위의 코드에서는 저장된 테마 설정을 확인하고, 저장되지 않았을 경우 기본값으로 밝은 테마를 사용하도록 설정합니다.

이러한 방법으로, shared_preferences 패키지를 활용하여 사용자가 선택한 앱 테마를 저장하고 불러와서 변경할 수 있습니다.

더 많은 내용을 알고 싶다면 아래의 링크를 참고하세요: