[flutter] shared_preferences 를 사용하여 사용자가 찜한 상품 목록을 저장하는 방법은 무엇인가요?

05 Dec 2023

flutter

소개

shared_preferences는 Flutter에서 사용자의 기본 선호도, 설정, 찜한 상품 목록 등을 저장하기 위한 간단한 키-값 저장소입니다. 이를 사용하여 사용자가 찜한 상품 목록을 저장하고 나중에 접근할 수 있습니다.

단계별 절차

1. shared_preferences 패키지 추가

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

dependencies:
  flutter:
    sdk: flutter

  shared_preferences: ^2.0.5

의존성을 추가한 후에는 flutter pub get 명령을 실행하여 패키지를 다운로드하고 프로젝트를 업데이트해야 합니다.

2. shared_preferences 초기화

SharedPreferences 인스턴스를 초기화해야 합니다. 일반적으로 앱이 시작될 때나 초기화 단계에서 이 작업을 수행합니다. 예를 들어, main.dart 파일의 main 함수 안에 다음과 같이 추가할 수 있습니다:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // SharedPreferences 초기화
  SharedPreferences prefs = await SharedPreferences.getInstance();
  
  runApp(MyApp());
}

3. 상품 목록 찜하기

사용자가 상품을 찜할 때마다, 해당 상품을 SharedPreferences에 저장합니다. 예를 들어, 상품 ID를 기준으로 Set<String>에 상품 ID를 추가합니다:

void addToWishlist(String productId) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  
  Set<String> wishlist = prefs.getStringList('wishlist') ?? {};
  wishlist.add(productId);
  
  await prefs.setStringList('wishlist', wishlist.toList());
}

4. 찜한 상품 목록 가져오기

저장된 찜한 상품 목록을 가져올 때는 getStringList 메서드를 사용합니다. 이 메서드는 키에 해당하는 값이 없을 경우 기본값으로 null을 반환합니다:

Future<List<String>> getWishlist() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  
  List<String>? wishlist = prefs.getStringList('wishlist');
  
  return wishlist ?? [];
}

5. 찜한 상품 목록 사용하기

이제 가져온 찜한 상품 목록을 사용할 수 있습니다. 예를 들어, 찜한 상품 목록을 ListView로 표시할 수 있습니다:

Widget buildWishlist() {
  return FutureBuilder<List<String>>(
    future: getWishlist(),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return CircularProgressIndicator();
      } else if (snapshot.hasError) {
        return Text("Error: ${snapshot.error}");
      } else {
        List<String> wishlist = snapshot.data ?? [];
        
        return ListView.builder(
          itemCount: wishlist.length,
          itemBuilder: (context, index) {
            String productId = wishlist[index];
            
            // TODO: 상품을 표시하는 위젯 반환
          },
        );
      }
    },
  );
}

결론

shared_preferences를 사용하여 사용자가 찜한 상품 목록을 저장할 수 있습니다. 이를 통해 앱을 사용하는 동안 찜한 상품 목록을 유지하고, 필요할 때 접근할 수 있습니다. 상품 목록을 저장하고 가져오는 단계를 정확히 따라가면 사용자 경험을 향상시킬 수 있습니다.