[flutter] shared_preferences를 활용하여 사용자의 즐겨찾기를 추가하는 방법은?

15 Dec 2023

flutter

앱 사용자가 자주 이용하는 기능이나 화면을 즐겨찾기로 추가하여 편리하게 이용할 수 있다면 좋을 것입니다. Flutter 앱에서는 shared_preferences 패키지를 사용하여 이러한 기능을 구현할 수 있습니다.

이번 글에서는 shared_preferences 패키지를 활용하여 사용자가 즐겨찾는 항목을 추가하고 제거하는 방법에 대해 살펴보겠습니다.

1. `shared_preferences` 패키지 추가

먼저, pubspec.yaml 파일에 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 FavoritePage extends StatefulWidget {
  @override
  _FavoritePageState createState() => _FavoritePageState();
}

class _FavoritePageState extends State<FavoritePage> {
  List<String> favorites = [];

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

  _loadFavorites() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      favorites = prefs.getStringList('favorites') ?? [];
    });
  }

  _saveFavorites(List<String> favorites) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setStringList('favorites', favorites);
  }

  _toggleFavorite(String item) {
    List<String> updatedFavorites = List.from(favorites);
    if (updatedFavorites.contains(item)) {
      updatedFavorites.remove(item);
    } else {
      updatedFavorites.add(item);
    }
    _saveFavorites(updatedFavorites);
    setState(() {
      favorites = updatedFavorites;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Favorite Page'),
      ),
      body: ListView(
        children: <Widget>[
          for (var item in items)
            ListTile(
              title: Text(item),
              trailing: IconButton(
                icon: Icon(
                  favorites.contains(item) ? Icons.favorite : Icons.favorite_border,
                  color: favorites.contains(item) ? Colors.red : null,
                ),
                onPressed: () {
                  _toggleFavorite(item);
                },
              ),
            ),
        ],
      ),
    );
  }
}

위 코드는 즐겨찾기 화면을 구현한 예시입니다. shared_preferences를 사용하여 사용자의 즐겨찾기 목록을 저장하고, 해당 목록을 화면에 표시하며 즐겨찾기를 추가 또는 제거할 수 있는 기능을 구현하였습니다.

이제 FavoritePage를 앱의 적절한 위치에서 호출하여 사용자가 원하는 항목을 즐겨찾기로 추가하고 제거할 수 있습니다.

shared_preferences를 사용하여 사용자의 정보를 로컬에 저장하고 관리하는 것은 Flutter 앱을 개발할 때 유용한 기능 중 하나입니다. 즐겨찾기와 같이 사용자의 선호도를 관리하는 기능을 추가하면, 사용자 경험을 더욱 향상시킬 수 있습니다.

이상으로 Flutter에서 shared_preferences를 활용하여 사용자의 즐겨찾기를 추가하는 방법에 대해 알아보았습니다. 원하는 항목을 즐겨찾기로 저장하는 기능을 쉽게 추가할 수 있을 것입니다.

참고 문헌: Flutter - shared_preferences 패키지

반드시 기억해야 할 점: shared_preferences는 사용자의 로컬 디바이스에 데이터를 저장하므로, 프라이버시 정책을 준수하기 위해 사용자에게 데이터 저장에 대한 동의를 요청해야 합니다.

1. shared_preferences 패키지 추가

2. 즐겨찾기 추가 및 제거

1. `shared_preferences` 패키지 추가