[flutter] shared_preferences 를 사용하여 사용자의 색상 설정을 저장하는 방법은 무엇인가요?

05 Dec 2023

flutter

개요

앱의 사용자에게 색상 설정 옵션을 제공하고, 사용자가 선택한 색상을 저장하여 다음에 앱을 실행할 때 적용되도록 하고 싶다면, shared_preferences 패키지를 사용할 수 있습니다. 이 패키지는 Flutter 앱에서 간단한 데이터를 로컬에 유지하고 검색할 수 있는 기능을 제공합니다.

shared_preferences 패키지 추가하기

프로젝트의 pubspec.yaml 파일에 다음 종속성을 추가합니다:

dependencies:
  shared_preferences: ^2.0.8

종속성을 추가하고 나면, 패키지를 가져와야 합니다. 터미널에서 다음 명령을 실행하세요:

flutter pub get

이제 shared_preferences를 사용할 준비가 되었습니다.

사용자의 색상 설정 저장하기

다음은 사용자가 선택한 색상을 shared_preferences를 사용하여 저장하는 방법입니다.

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

class ColorSettings {
  static const String _keyColor = 'user_color';

  static Future<Color> getUserColor() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    int colorValue = prefs.getInt(_keyColor) ?? Colors.blue.value;
    return Color(colorValue);
  }

  static Future<void> setUserColor(Color color) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setInt(_keyColor, color.value);
  }
}

위의 코드에서는 ColorSettings 클래스에 두 개의 정적 메서드를 선언했습니다. getUserColor 메서드는 저장된 사용자 색상을 가져오고, 만약 저장된 값이 없는 경우 기본값으로 파란색을 반환합니다. setUserColor 메서드는 사용자가 선택한 색상을 저장합니다.

색상 설정하기

사용자의 설정 화면에서 색상을 선택하고, 선택된 색상을 저장할 때 setUserColor 메서드를 호출하면 됩니다. 예를 들어, 다음은 AlertDialog를 사용하여 사용자가 색상을 선택하는 방법을 보여줍니다:

Color _selectedColor = Colors.blue;

// 사용자가 색상을 선택하고 저장할 때 호출되는 함수
void saveColorSetting() async {
  await ColorSettings.setUserColor(_selectedColor);
}

// AlertDialog 안에 있는 색상 선택 위젯
Widget colorSelectionWidget() {
  return ColorPicker(
    selectedColor: _selectedColor,
    onColorChanged: (Color color) {
      setState(() {
        _selectedColor = color;
      });
    },
  );
}

// AlertDialog를 보여주는 함수
void showColorSettingDialog() {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('색상 설정'),
        content: colorSelectionWidget(),
        actions: [
          TextButton(
            onPressed: () {
              saveColorSetting();
              Navigator.pop(context);
            },
            child: Text('저장'),
          ),
          TextButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text('취소'),
          )
        ],
      );
    },
  );
}

위의 코드에서 saveColorSetting 함수는 ColorSettings.setUserColor를 호출하여 선택된 색상을 저장합니다. showColorSettingDialog 함수는 AlertDialog를 보여주며, 그 안에 colorSelectionWidget를 사용하여 색상을 선택할 수 있는 위젯을 보여줍니다. 저장 버튼을 클릭하면 saveColorSetting 함수가 호출되고, 취소 버튼을 클릭하면 대화 상자가 닫힙니다.

이제 사용자가 선택한 색상이 shared_preferences를 사용하여 저장되고, 앱을 다시 시작할 때마다 해당 색상이 적용되게 됩니다.

마무리

이것은 shared_preferences 패키지를 사용하여 사용자의 색상 설정을 저장하는 방법에 대한 간단한 예제입니다. 이와 같은 방법을 사용하여 다양한 설정값을 저장하고 가져올 수 있습니다. 더 많은 정보와 기능은 shared_preferences 패키지의 문서를 확인해보세요.