[flutter] shared_preferences 를 사용하여 사용자가 좋아하는 음식 목록을 저장하는 방법은 무엇인가요?

05 Dec 2023

flutter

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

class FoodPreferencesPage extends StatefulWidget {
  @override
  _FoodPreferencesPageState createState() => _FoodPreferencesPageState();
}

class _FoodPreferencesPageState extends State<FoodPreferencesPage> {
  List<String> selectedFoodList = [];
  SharedPreferences prefs;

  @override
  void initState() {
    super.initState();
    initPreferences();
  }

  void initPreferences() async {
    prefs = await SharedPreferences.getInstance();
    selectedFoodList = prefs.getStringList("foodList") ?? [];
    setState(() {});
  }

  void toggleFoodSelection(String foodName) {
    setState(() {
      if (selectedFoodList.contains(foodName)) {
        selectedFoodList.remove(foodName);
      } else {
        selectedFoodList.add(foodName);
      }
      savePreferences();
    });
  }

  void savePreferences() async {
    await prefs.setStringList("foodList", selectedFoodList);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("음식 선호도"),
      ),
      body: ListView(
        children: <Widget>[
          FoodPreferenceItem(
            foodName: "피자",
            isSelected: selectedFoodList.contains("피자"),
            onSelect: toggleFoodSelection,
          ),
          FoodPreferenceItem(
            foodName: "스테이크",
            isSelected: selectedFoodList.contains("스테이크"),
            onSelect: toggleFoodSelection,
          ),
          FoodPreferenceItem(
            foodName: "초밥",
            isSelected: selectedFoodList.contains("초밥"),
            onSelect: toggleFoodSelection,
          ),
          FoodPreferenceItem(
            foodName: "치킨",
            isSelected: selectedFoodList.contains("치킨"),
            onSelect: toggleFoodSelection,
          ),
          FoodPreferenceItem(
            foodName: "마라탕",
            isSelected: selectedFoodList.contains("마라탕"),
            onSelect: toggleFoodSelection,
          ),
        ],
      ),
    );
  }
}

class FoodPreferenceItem extends StatelessWidget {
  final String foodName;
  final bool isSelected;
  final Function onSelect;

  const FoodPreferenceItem({
    Key key,
    this.foodName,
    this.isSelected,
    this.onSelect,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(foodName),
      trailing: Checkbox(
        value: isSelected,
        onChanged: (newValue) {
          onSelect(foodName);
        },
      ),
    );
  }
}

이 예제에서는 Flutter의 shared_preferences 패키지를 사용하여 사용자가 좋아하는 음식 목록을 저장하는 방법을 보여줍니다. 사용자가 ListView에서 선택한 음식 목록은 SharedPreferences를 사용하여 저장 및 로드되며, 앱이 종료되어도 선택한 음식 목록이 유지됩니다.

먼저, shared_preferences 패키지를 통해 SharedPreferences 인스턴스를 초기화합니다. 그런 다음 initState() 메서드에서 SharedPreferences에서 사용자가 선택한 음식 목록을 로드합니다. 로드할 값이 없는 경우 기본값으로 빈 목록을 사용합니다.

사용자가 음식을 선택/해제할 때마다 toggleFoodSelection() 메서드가 호출됩니다. 이 메서드에서는 선택한 음식을 목록에 추가하거나 제거한 다음, 변경된 목록을 SharedPreferences에 저장합니다.

마지막으로, ListView에서 사용자에게 표시되는 음식 목록을 나타내는 FoodPreferenceItem 위젯을 만듭니다. 각 항목은 선택 상태를 나타내는 Checkbox 위젯과 함께 ListTile로 구성됩니다.

이 예제를 통해 flutter의 shared_preferences 패키지를 사용하여 사용자의 음식 선호도를 저장할 수 있는 방법을 확인할 수 있습니다.