[flutter] shared_preferences 를 사용하여 사용자가 선택한 옵션을 저장하는 방법은 무엇인가요?

05 Dec 2023

flutter

앱에서 사용자가 선택한 옵션을 저장하고 나중에 이를 검색하거나 업데이트하고 싶다면, shared_preferences 패키지를 사용할 수 있습니다. 이 패키지는 키-값 쌍 기반으로 작동하며, 영구 저장소를 통해 데이터를 유지합니다.

1. shared_preferences 패키지 추가하기

먼저, shared_preferences 패키지를 Flutter 프로젝트에 추가해야 합니다. pubspec.yaml 파일에서 dependencies 섹션에 다음과 같이 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.5

그런 다음, 터미널에 다음 명령어를 입력하여 패키지를 설치합니다:

flutter pub get

2. 옵션 저장하기

사용자가 옵션을 선택하면, shared_preferences 패키지를 사용하여 해당 값에 대한 키-값 쌍을 저장할 수 있습니다. 예를 들어 사용자가 어떤 언어로 앱을 설정했다고 가정해봅시다. 다음 예제 코드를 참고하세요:

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

class OptionPage extends StatelessWidget {
  final String selectedLanguage;

  OptionPage({required this.selectedLanguage});

  Future<void> saveOption() async {
    SharedPreferences preferences = await SharedPreferences.getInstance();
    preferences.setString('language', selectedLanguage);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Options'),
      ),
      body: Column(
        children: [
          ListTile(
            title: Text('English'),
            onTap: () async {
              await saveOption();
              // 선택한 옵션을 저장하고 이전 화면으로 이동
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: Text('Korean'),
            onTap: () async {
              await saveOption();
              // 선택한 옵션을 저장하고 이전 화면으로 이동
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

saveOption() 메소드에서 getInstance()를 사용하여 SharedPreferences 인스턴스를 얻고, setString() 메소드를 사용하여 'language' 키에 선택한 언어 값을 저장합니다.

3. 저장된 옵션 불러오기

다른 화면에서 저장된 옵션을 불러오려면, SharedPreferences 인스턴스를 다시 얻고 해당 키의 값을 검색하면 됩니다. 예를 들어, 앱이 로드될 때 저장된 언어 옵션을 불러오는 예제 코드입니다:

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

class HomePage extends StatelessWidget {
  Future<String> getSavedOption() async {
    SharedPreferences preferences = await SharedPreferences.getInstance();
    String? language = preferences.getString('language');
    return language ?? 'English'; // 저장된 값이 없으면 기본값인 'English'로 설정
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: getSavedOption(),
      builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
        if (snapshot.hasData) {
          return Scaffold(
            appBar: AppBar(
              title: Text('Home'),
            ),
            body: Center(
              child: Text('Selected language: ${snapshot.data}'),
            ),
          );
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

getSavedOption() 메소드에서 getInstance()를 사용하여 SharedPreferences 인스턴스를 얻고, getString() 메소드를 사용하여 'language' 키의 값을 검색합니다. 값이 없으면 기본값으로 'English'를 반환합니다.

이제, snapshot.data로 선택한 언어 옵션을 사용하여 앱의 다른 부분에 표시하거나 처리할 수 있습니다.

이상입니다! shared_preferences 패키지를 사용하여 사용자가 선택한 옵션을 저장하는 방법을 알아보았습니다. 앱의 다양한 설정에 이를 활용할 수 있습니다. 추가적인 사항은 shared_preferences 패키지 문서를 참조하시기 바랍니다.