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

05 Dec 2023

flutter

shared_preferences 패키지는 Dart와 Flutter에서 간단한 키-값 형식의 데이터를 로컬 저장소에 유지할 수 있는 방법을 제공합니다. 사용자가 선택한 뉴스 카테고리와 같은 설정을 로컬에 저장하려면 shared_preferences를 사용할 수 있습니다.

1. shared_preferences 패키지 가져오기

먼저, pubspec.yaml 파일에 shared_preferences 패키지를 추가해야 합니다. dependencies 섹션에 아래의 코드를 추가해주세요:

dependencies:
  shared_preferences: ^2.0.6

다음으로 터미널에서 flutter pub get 명령을 실행하여 패키지를 가져오세요.

2. 뉴스 카테고리 저장하기

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

void saveNewsCategory(String category) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setString('news_category', category);
}

saveNewsCategory 함수는 사용자가 선택한 뉴스 카테고리를 저장합니다. SharedPreferences.getInstance()를 사용하여 SharedPreferences 인스턴스를 가져온 후, setString 메서드를 호출하여 ‘news_category’ 키에 사용자가 선택한 카테고리를 저장합니다.

3. 저장된 뉴스 카테고리 가져오기

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

Future<String> getSavedNewsCategory() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  return prefs.getString('news_category') ?? 'default_category';
}

getSavedNewsCategory 함수는 저장된 뉴스 카테고리를 가져옵니다. SharedPreferences.getInstance()를 사용하여 SharedPreferences 인스턴스를 가져온 후, getString 메서드를 호출하여 ‘news_category’ 키에 저장된 값을 가져옵니다. 값이 없을 경우 ‘default_category’를 반환합니다.

4. 사용자가 선택한 뉴스 카테고리 저장 및 불러오기 예제

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

class NewsCategoryPage extends StatefulWidget {
  @override
  _NewsCategoryPageState createState() => _NewsCategoryPageState();
}

class _NewsCategoryPageState extends State<NewsCategoryPage> {
  final List<String> categories = ['Technology', 'Sports', 'Entertainment'];
  String selectedCategory = '';

  @override
  void initState() {
    super.initState();
    getSavedNewsCategory().then((value) {
      setState(() {
        selectedCategory = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('News Categories'),
      ),
      body: ListView.builder(
        itemCount: categories.length,
        itemBuilder: (context, index) => ListTile(
          title: Text(categories[index]),
          trailing: selectedCategory == categories[index] ? Icon(Icons.check) : null,
          onTap: () {
            setState(() {
              selectedCategory = categories[index];
            });
            saveNewsCategory(selectedCategory);
          },
        ),
      ),
    );
  }
}

위의 예제에서는 사용자가 선택한 뉴스 카테고리를 저장하고 불러오는 방법을 보여줍니다. NewsCategoryPage 클래스에서는 ListView.builder를 사용하여 카테고리 목록을 표시하고, 선택한 카테고리에는 체크 아이콘을 표시합니다. 사용자가 카테고리를 선택하면 해당 카테고리가 저장되고 화면이 갱신됩니다.

이제 shared_preferences를 사용하여 사용자가 선택한 뉴스 카테고리를 저장하고 불러오는 방법에 대해 알게 되었습니다. 이를 활용하여 앱의 설정이나 사용자 인터페이스와 관련된 데이터를 로컬에 저장할 수 있습니다.