Flutter _ Favorites

230608

 

---

 

 

 

오늘은 웹툰의

좋아요 기능을 만들어 보자!

 

---

1. Favorite Action

 

DetailScreen에 있는

AppBar에는 actions라는 리스트 위젯이 존재하는데

이것을 활용해서 좋아요 버튼을 만들어 보자.

 

 

위와 같이 actions를 선언하고

IconButton으로 만든 다음

 

눌렀을때의 함수

onPressed는 잠시 비워두고

아이콘만 추가해 주자.

 

멋진 아이콘이 생성 되었다.

 

이제 우리는 위의 버튼을 누르면?

 

채워진 하트가 나오고

 

다시 채워진 하트를 누르면?

 

비어있는 하트가 나오게 해야한다.

 

어떻게 휴대폰에 위의 데이터를 담아둘 수 있을까?

 

---

 

2. Shared_Preferences Package

 

 

위 질문의 정답은

바로 Flutter 팀이 만든

Shared_Preferences Package다.

 

 

https://pub.dev/packages/shared_preferences

shared_preferences | Flutter Package

이 shared_preferences 패키지로

휴대폰에 데이터를 저장할 수 있다.

 

바로 설치해보자.

 

flutter pub add shared_preferences

위 코드를 터미널에 입력하여

 

다운을 완료해 준다.

 

---

이 패키를 사용하는 방법은

 

https://pub.dev/packages/shared_preferences

shared_preferences | Flutter Package

위 링크에 자세히 나와있는데

 

---

먼저 Write Data의 경우

// Obtain shared preferences.
final SharedPreferences prefs = await SharedPreferences.getInstance();

위 코드로

핸드폰 저장소와 connection을 만든다.

 

// Save an integer value to 'counter' key.
await prefs.setInt('counter', 10);

// Save an boolean value to 'repeat' key.
await prefs.setBool('repeat', true);

// Save an double value to 'decimal' key.
await prefs.setDouble('decimal', 1.5);

// Save an String value to 'action' key.
await prefs.setString('action', 'Start');

// Save an list of strings to 'items' key.
await prefs.setStringList('items', <String>['Earth', 'Moon', 'Sun']);

그리고 위 코드처럼

setInt, setBool, setDouble, setString, setStringList를

 

(key, 값)의 구조로

각기 다른 값과 자료형을 저장할 수 있다.

 

---

 

그리고 Read Data의 경우

 

// Try reading data from the 'counter' key. If it doesn't exist, returns null.
final int? counter = prefs.getInt('counter');

// Try reading data from the 'repeat' key. If it doesn't exist, returns null.
final bool? repeat = prefs.getBool('repeat');

// Try reading data from the 'decimal' key. If it doesn't exist, returns null.
final double? decimal = prefs.getDouble('decimal');

// Try reading data from the 'action' key. If it doesn't exist, returns null.
final String? action = prefs.getString('action');

// Try reading data from the 'items' key. If it doesn't exist, returns null.
final List<String>? items = prefs.getStringList('items');

위와 같이

getInt, getBool, getDouble, getStringList로

key값을 불러오면 된다.

 

---

 

자 그럼 다시 코드로 돌아와서

 

우리는 사용자가 버튼을 누를 때마다

좋아요를 누른

모든 ID의 리스트를 가져오려고 한다.

 

쉽게 설명하면

어떤 리스트에 좋아요가 눌린 웹툰의 ID를 모아서

 

리스트 안에 웹툰 ID의 유무로 Icon을 보여주고

 

또한 버튼을 클릭했을때

해당 웹툰 ID를 더하거나 빼주면 된다.

 

 

우선 SharedPreferences를 위한

선언 부터 해보자.

 

SharedPreferences를 사용할 변수를 선언해주고

 

initState() 안에

initPrefs()라는 함수를 넣어준다.

 

initPrefs()는 휴대폰과 저장소의

연결 관련된 함수이다.

 

그래서 첫 줄로

휴대폰 저장소와 Connection할

비동기 함수를 선언한다.

 

그리고 prefs가 웹툰 ID가 저장된

리스트가 있는지 검색하게 한다.

 

위와 같이 ' likedToons '라는 key값으로

StringList를 가져오게 한다.

 

initPrefs()는 return 받을 값이

리스트일수도 있고 아닐수도 있는데

 

이는 처음 고객이 들어왔을때는

리스트가 비어있기 때문이다.

 

그래서 likedToons라는 변수를 선언하고

조건문으로 값이 null인 경우

'likedToons'라는 key로 

비어있는 리스트를 만들게 한다.

 

그리고 만약 likedToons에 값이 있다면,

 

두 번째 조건으로 likedToons에

widget.id가 있는지 체크할것이고

 

그게 true이면 다음 실행문을 만들어 줄것이다.

 

 

그리고 접속한 유저가 좋아요를 눌렀는지 안눌렀는지

상태를 나타내는 변수를 선언한다.

 

default 값은 false이다.

 

이제 위에서 선언한 상태 값을

likedToons가 widget.id가 있다고 넘어가면?

true로 변경해 주는 것이다.

 

그리고 setState()를 사용하여

isLiked의 상태가 보존되게 하자.

 

---

기본적인 SharedPreferences를 사용할

함수의 정의가 끝났으니

 

이제 UI의 로직을 만들어보자.

 

아까 선언해 주었던

IconButton에 돌아와서

 

isLiked의 true, false 값을 이용해

다른 아이콘이 출력되게 로직을 바꿔주고

 

onPressed에 들어갈 함수를 정의해주자.

 

onHeartTap() 을 선언하고

likedToons를 가져와서

 

likedToons가 true면

widget.id를 제거하고

 

likedToons가 false면

widget.id를 추가한다.

 

그리고 위의 로직이 다 통과되는것을 기다렸다가

prefs는 'likedToons'라는 key값으로

likedToons 리스트를 저장하고

 

setState()를 사용하여

isLiked를 초기화 해준다.

 

마지막으로

onPressed에 위의 onHeartTap을 넣어주면?

 

훌륭한 좋아요 버튼 기능이

만들어 졌다.