[flutter] shared_preferences 를 사용하여 사용자가 선택한 선호 상품 카테고리를 저장하는 방법은 무엇인가요?

05 Dec 2023

flutter

사용자가 앱에서 선호하는 상품 카테고리를 선택할 수 있도록 하는 경우, 선택한 카테고리를 영구적으로 저장해야 합니다. Flutter에서는 이를 위해 shared_preferences 패키지를 사용할 수 있습니다. shared_preferences는 간단하고 효율적인 데이터 저장을 제공하여 앱의 선호 설정, 테마 설정 등을 관리하는 데 유용한 도구입니다.

1. shared_preferences 패키지 추가

먼저, shared_preferences 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.6

위의 구성에서는 shared_preferences 패키지의 2.0.6 버전을 사용하고 있습니다. 이를 프로젝트에 적용하기 위해 flutter pub get 명령어를 실행해야 합니다.

2. 상품 카테고리 저장 로직 구현

선호 상품 카테고리를 저장하기 위해 다음과 같은 단계를 따릅니다.

2.1. 카테고리 선택 화면 구현

선호 카테고리를 선택하기 위한 화면을 구현합니다. 이 화면에서는 사용자에게 카테고리 목록을 보여주고, 사용자가 원하는 카테고리를 선택하도록 합니다.

2.2. 선택한 카테고리를 SharedPreferences에 저장

선택한 카테고리를 SharedPreferences에 저장하기 위해 다음과 같은 코드를 작성합니다.

import 'package:shared_preferences/shared_preferences.dart';

// 사용자가 선택한 카테고리 저장
Future<void> savePreferredCategory(String category) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setString('preferred_category', category);
}

위 코드에서 savePreferredCategory 메서드는 SharedPreferences.getInstance()를 호출하여 SharedPreferences 인스턴스를 얻은 다음, setString 메서드를 사용하여 preferred_category라는 키로 선택한 카테고리 값을 저장합니다.

2.3. 로그인 또는 앱 실행 시 카테고리 불러오기

앱이 실행되거나 사용자가 로그인할 때, 저장된 선호 카테고리 값을 불러오는 코드를 작성해야 합니다. 다음과 같은 코드를 사용할 수 있습니다.

import 'package:shared_preferences/shared_preferences.dart';

// 저장된 선호 카테고리 불러오기
Future<String?> getPreferredCategory() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  return prefs.getString('preferred_category');
}

위 코드에서 getPreferredCategory 메서드는 SharedPreferences.getInstance()를 호출하여 SharedPreferences 인스턴스를 얻은 다음, getString 메서드를 사용하여 preferred_category 키에 저장된 값, 즉 선호 카테고리를 불러옵니다.

3. 사용자 선호 카테고리 활용하기

선호 카테고리 값을 얻은 후, 해당 카테고리를 기반으로 상품 리스트를 필터링하거나 사용자에게 맞춤형 컨텐츠를 제공할 수 있습니다. 필요한 곳에서 getPreferredCategory 메서드를 호출하여 사용자가 선택한 선호 카테고리를 얻은 다음, 이를 활용하는 코드를 작성하면 됩니다.

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

class ProductListScreen extends StatelessWidget {
  TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Product List'),
      ),
      body: Center(
        child: Column(
          children: [
            Text(
              'Preferred Category:',
              style: TextStyle(
                fontWeight: FontWeight.bold,
              ),
            ),
            FutureBuilder<String?>(
              future: getPreferredCategory(),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                    snapshot.data!,
                  );
                }
                return CircularProgressIndicator();
              },
            ),
            SizedBox(height: 16),
            Text('Filtered Product List:'),
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Search',
              ),
              onChanged: (value) {
                // Perform filtering based on user input
              },
            ),
            // Display filtered product list based on preferred category and search keyword
          ],
        ),
      ),
    );
  }

  // 저장된 선호 카테고리 불러오기
  Future<String?> getPreferredCategory() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getString('preferred_category');
  }
}

위의 예제 코드에서는 getPreferredCategory를 통해 사용자가 선택한 선호 카테고리 값을 불러와서 화면에 출력하는 방식으로 활용하였습니다.