[flutter] shared_preferences를 활용하여 앱 내에서 사용자가 선택한 테마 색상을 저장하는 방법은?

15 Dec 2023

flutter

앱에서 사용자가 선택한 테마 색상을 저장하려면 shared_preferences 패키지를 사용할 수 있습니다. 이 패키지를 활용하면 사용자의 기기 내에 간단한 데이터를 영구적으로 저장하고 불러올 수 있습니다.

1. shared_preferences 패키지 추가하기

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

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.6

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

2. 테마 선택 값 저장하기

사용자가 테마를 선택했을 때 해당 값을 shared_preferences에 저장합니다. 아래는 테마 선택 값을 저장하는 예제 코드입니다.

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

void saveThemeColor(String color) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  prefs.setString('themeColor', color);
}

3. 저장된 테마 값 불러오기

앱을 실행할 때 저장된 테마 선택 값을 불러옵니다. 아래는 저장된 테마 값을 불러오는 예제 코드입니다.

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

Future<String> getThemeColor() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  return prefs.getString('themeColor') ?? 'defaultColor';  // 기본 값 설정
}

4. 테마에 적용하기

불러온 테마 값을 이용하여 앱의 테마를 변경합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        accentColor: Colors.green,
        // 저장된 테마 값으로 변경
        brightness: getThemeColor() == 'dark' ? Brightness.dark : Brightness.light,
      ),
      home: MyHomePage(),
    );
  }
}

이제 사용자가 앱에서 선택한 테마 색상이 shared_preferences를 통해 저장되고 로드됩니다.

이 방법을 활용하면 사용자가 앱의 테마를 변경하더라도 선택한 값이 영구적으로 유지되어 향후 앱 실행 시에도 이전의 선택이 유지됩니다.

참고 자료: shared_preferences 패키지 문서