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

05 Dec 2023

flutter

이제 사용자가 좋아하는 팀 목록을 저장하고 싶다면 Flutter에서 shared_preferences 패키지를 사용할 수 있습니다. shared_preferences는 Flutter 애플리케이션에서 단순한 키-값 저장소로 사용할 수 있는 패키지입니다.

Step 1: shared_preferences 패키지 추가하기

먼저, pubspec.yaml 파일에 shared_preferences 패키지를 추가해야 합니다. 이를 위해 다음의 의존성을 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.8

의존성을 추가한 후 패키지를 가져와 주세요. 이를 위해 다음 명령어를 사용하면 됩니다:

flutter pub get

Step 2: shared_preferences 사용하기

이제 shared_preferences를 사용하여 사용자가 좋아하는 팀 목록을 저장하는 방법을 알아봅시다.

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

class TeamListScreen extends StatefulWidget {
  @override
  _TeamListScreenState createState() => _TeamListScreenState();
}

class _TeamListScreenState extends State<TeamListScreen> {
  List<String> selectedTeams = [];

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

  Future<void> _loadSelectedTeams() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    List<String>? teams = prefs.getStringList('selectedTeams');
    if (teams != null) {
      setState(() {
        selectedTeams = teams;
      });
    }
  }

  Future<void> _saveSelectedTeams(List<String> teams) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setStringList('selectedTeams', teams);
  }

  void _toggleTeamSelection(String team) {
    setState(() {
      if (selectedTeams.contains(team)) {
        selectedTeams.remove(team);
      } else {
        selectedTeams.add(team);
      }
      _saveSelectedTeams(selectedTeams);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('좋아하는 팀 선택'),
      ),
      body: ListView(
        children: teams.map((team) {
          bool isSelected = selectedTeams.contains(team);
          return ListTile(
            title: Text(team),
            trailing: isSelected
                ? Icon(Icons.check_box)
                : Icon(Icons.check_box_outline_blank),
            onTap: () => _toggleTeamSelection(team),
          );
        }).toList(),
      ),
    );
  }
}

위의 예시 코드에서는 selectedTeams라는 리스트를 사용하여 사용자가 선택한 팀을 저장합니다. _loadSelectedTeams 메소드를 통해 이전 선택 목록을 로드하고, _saveSelectedTeams 메소드를 통해 현재 선택 목록을 저장합니다.

전체 코드에서 teams 변수에는 선택 가능한 팀 목록이 들어있다고 가정합니다. 이 부분은 애플리케이션에 맞게 수정해야 합니다.

이제 Flutter 애플리케이션에서 shared_preferences를 사용하여 사용자가 좋아하는 팀 목록을 저장할 수 있습니다!

참고 자료

shared_preferences 패키지 문서