[flutter] shared_preferences 를 사용하여 사용자가 선택한 신문 탭 목록을 저장하는 방법은 무엇인가요?

05 Dec 2023

flutter

Flutter 앱에서 사용자가 선택한 신문 탭 목록을 유지하고 싶다면, shared_preferences 패키지를 사용할 수 있습니다. shared_preferences는 Flutter 앱에서 간단한 키-값 쌍으로 데이터를 저장하고 검색하는 데 사용되는 영구 저장소입니다.

다음은 shared_preferences를 사용하여 사용자가 선택한 신문 탭 목록을 저장하는 예제입니다.

1. shared_preferences 패키지 추가

먼저, pubspec.yaml 파일에 shared_preferences 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 shared_preferences 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.6

이후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

2. 신문 탭 목록 저장 및 불러오기

다음은 사용자가 선택한 신문 탭 목록을 저장하고 불러오는 코드입니다.

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

class NewsTabSelectionPage extends StatefulWidget {
  @override
  _NewsTabSelectionPageState createState() => _NewsTabSelectionPageState();
}

class _NewsTabSelectionPageState extends State<NewsTabSelectionPage> {
  List<String> selectedTabs = [];

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

  void loadSelectedTabs() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    List<String>? savedTabs = prefs.getStringList('selectedTabs');
    if (savedTabs != null) {
      setState(() {
        selectedTabs = savedTabs;
      });
    }
  }

  void saveSelectedTabs() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setStringList('selectedTabs', selectedTabs);
  }

  void toggleTab(String tab) {
    setState(() {
      if (selectedTabs.contains(tab)) {
        selectedTabs.remove(tab);
      } else {
        selectedTabs.add(tab);
      }
    });
  }

  @override
  void dispose() {
    saveSelectedTabs();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('신문 탭 선택'),
      ),
      body: ListView(
        children: [
          ListTile(
            title: Text('스포츠'),
            onTap: () => toggleTab('스포츠'),
            trailing: Checkbox(
              value: selectedTabs.contains('스포츠'),
              onChanged: (value) => toggleTab('스포츠'),
            ),
          ),
          ListTile(
            title: Text('연예'),
            onTap: () => toggleTab('연예'),
            trailing: Checkbox(
              value: selectedTabs.contains('연예'),
              onChanged: (value) => toggleTab('연예'),
            ),
          ),
          // 추가적인 신문 탭 항목을 여기에 추가할 수 있습니다.
        ],
      ),
    );
  }
}

위의 예제에서는 selectedTabs라는 List<String>을 사용하여 사용자가 선택한 신문 탭을 저장합니다. loadSelectedTabs 함수는 이전에 저장한 탭 목록을 불러오고, saveSelectedTabs 함수는 현재 선택한 탭 목록을 저장합니다.

체크박스를 통해 탭을 선택하거나 해제할 수 있으며, 탭을 선택할 때마다 toggleTab 함수가 호출되며 선택한 탭을 selectedTabs에 추가하거나 제거합니다.

추가적인 신문 탭 항목을 필요에 따라 리스트에 추가할 수 있습니다.

이제 NewsTabSelectionPage 위젯을 앱의 해당 위치에서 호출하면 사용자가 선택한 신문 탭이 shared_preferences를 통해 유지될 것입니다.

결론

shared_preferences 패키지를 사용하여 Flutter 앱에서 사용자가 선택한 신문 탭 목록을 저장할 수 있습니다. 이를 통해 앱을 재실행해도 사용자의 선호 설정을 유지할 수 있습니다.