[flutter] 플러터 튜토리얼5. 플러터 리스트 뷰에 하트 추가하기

튜토리얼4에 이어서 진행하도록 한다.

 

아래의 페이지에서 하트 기능 추가에 대한 설명을 볼 수 있다.

4. Add icons to the list 부터 보면 된다!

codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#3

Write Your First Flutter App, part 2  |  Google Codelabs

RandomWordsState 클래스 안에 _saved를 추가했는데, _saved에는 하트를 누른 단어들을 중복없이 들어가도록 할 것이다.

그 이후에 _buildRow에 하트모양 아이콘을 추가한다.

alreadySaved의 값에 따라서 빨간 하트를 보여줄 것인지, 빈 하트를 보여줄 것인지 결정된다. 

이미 플러터에서 다 만들어놨기 때문에 가져다쓰기만 하면된다.

 

Ctrl+F5를 눌러 확인해보면 빈 하트 모양이 추가된 것을 볼 수 있다.

지금은 saved 안에 아무것도 없기 때문에 다 빈 하트로 보이게 된다.

다음 스텝에서 하트를 클릭하면 빨간 하트로 보이도록  한다.

 

비어있는 하트를 눌렀으면 _saved에 삽입하여 빨간하트로 보이도록하고, 빨간하트를 누르면 _saved에서 제거한다.

 

Ctrl+F5를 눌러서 실행하면 클릭 시 빨간하트가 되고, 빨간하트를 누르면 빈하트로 바뀌는 것을 확인할 수 있다.

 

이제 하트를 누른 단어들만 볼 수 있도록 리스트를 만들 것이다.

아이콘버튼을 추가하고 (리스트 아이콘), onPressed(터치를 했을 때) _pushSaved라는 것을 넘겨주도록 한다.

에러가 뜨고있는 _pushSaved를 fix > Create method '_pushSaved'를 눌러주면 메서드가 자동생성된다.

 

_pushSaved 메서드 안에 아래와 같이 작성해준다.

하트를 누른 단어들을 Saved Suggestions라는 타이틀을 가진 페이지에 보여주게 된다.

 

오른쪽 상단에있는 리스트아이콘을 누르면 _pushSaved 메서드가 실행된다.

 

하트를 누른 단어들이 보여진다.