[웹툰 앱 만들기] shared_preferences 이용해 좋아요 설정 나타내기

위 화면의 헤더의 오른쪽 하트를 통해 본인이 좋아요를 누르거나 좋아요를 취소할 수 있다. 휴대폰의 저장소를 이용해 앱을 재실행해도 기록이 남아 있다.

 

설정 방법은 아래와 같다.

 

 

1. shared_preferences install

https://pub.dev/packages/shared_preferences

shared_preferences | Flutter Package

installing 탭의 설명대로 install한다. 추가로 Readme 탭에서 활용방법을 확인할 수 있다.

 

 

2. 화면에 하트 아이콘 나타내고, likedToons 초기화하기

하트 이모티콘을 눌렀을 때 하트 이모티콘이 눌려진 웹툰이 모여진 likedToons에 저장될 수 있도록 했다. 먼저 헤더인 AppBar에 하트 아이콘 버튼을 actions로 설정한다.

actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.favorite_outline_rounded),
          )
        ],

그리고 웹툰 상세화면으로 넘어오면 휴대폰의 저장소인 prefs를 통해 likedToons를 정의하는 함수를 initState에 설정한다. 만약 사전에 저장된 likedToons가 있다면 그 정보를 불러오고, 없다면 빈 리스트로 likedToons를 정의했다. isLiked는 사용자가 해당 상세페이지의 웹툰에 하트 아이콘 클릭 여부를 표시하고 설정하기 위해 만든 변수이다. 디폴트 값은 false로 설정했다.

  void initPrefs() async {
    prefs = await SharedPreferences.getInstance();
    final likedToons = prefs.getStringList('likedToons');
    if (likedToons != null) {
      if (likedToons.contains(widget.id)) {
        isLiked = true;
      }
    } else {
      await prefs.setStringList('likedToons', []);
    }
  }

  @override
  void initState() {
    super.initState();
    // ...
    initPrefs();
  }

https://github.com/soaringwave/Flutter-studying/commit/41274aa09c8f2e916bf9525e9e1a8215c7fd3bca

Add heart icon and init likedToons · soaringwave/Flutter-studying@41274aa

 

 

3. 하트 이모티콘을 누를 때 likedToons에서 일어나는 동작 설정하기

  onHeartPressd() async {
    final likedToons = prefs.getStringList('likedToons');
    if (likedToons != null) {
      if (isLiked) {
        likedToons.remove(widget.id);
      } else {
        likedToons.add(widget.id);
      }
      await prefs.setStringList('likedToons', likedToons);
      setState(() {
        isLiked = !isLiked;
      });
    }
  }

이는 하트 아이콘을 클릭했을 때 실행되는 함수이다. prefs를 통해 likedToons를 불러오고, likedToons가 존재한다고 가정하에 만약 isLiked가 이미 true였다면 목록에서 제외하고, 반대라면 목록에 추가한다. 로컬인 likedToons를 휴대폰 저장 공간에 저장하고자 prefs를 이용해 저장하고, isLiked의 상태를 반대로 저장한다.

// ...
		setState(() {
          isLiked = true;
        });
// ...
            onPressed: onHeartPressd,
            icon: isLiked
                ? const Icon(Icons.favorite_rounded)
                : const Icon(Icons.favorite_outline_rounded),
// ...

이때 isLiked의 상태에 따라 화면에 사용자의 하트 클릭 여부를 나타내고자 아이콘을 변경해야 한다. 만약 사용자가 하트 아이콘을 홀수만큼 누르면 isLiked 값이 true이며, 화면에는 꽉 찬 하트가 나타난다. 반대로 짝수만큼 눌렀다면 isLiked는 false 값이며 화면에는 빈 하트 아이콘으로 나타난다.

---

https://nomadcoders.co/flutter-for-beginners/lectures/4176

All Courses – 노마드 코더 Nomad Coders