Flutter 기본_ListView2

이전 kimtaewookdeveloper.tistory.com/23의 ListView는 그냥 무한 스크롤만 가능한 리스트 뷰였다. 

여기서 더 나아가 ListView에 하트 icon을 추가하고, 하트 icon이 눌린 item만 있는 화면도 만들어보자.

 

이전 ListView와 달라진 부분은 RandomWordSate클래스이다.

_saved 변수는 하트 아이콘을 통해 누른 값들을 저장할 set이다.(set은 배열과 같지만, 순서가 없고, 중복된 값을 허용하지 않는다.)

 

먼저 _buildRow 위젯을 보자.

 _buildRow는 이전 글에도 써 있듯이 ListView의 각 행을 리턴해주는 위젯이다.

추가된 부분은 alreadySaved변수,  trailing, onTap이다.

alreadySaved 변수는 인자로 받은 단어(pair)가 _saved에 있는 지의 값이 있는 변수다.

trailing은 상위 위젯의 끝에 위젯을 위치시키는 속성이다.

여기서는 alreadySaved의 값에 따라 true면 Icons.favorite에 Colors.Red, false면 Icons.favorite_border에 null을 적용시킨다.

onTap()은 해당 tile을 눌렀을 때, 작동시킬 이벤트인데, 안에 setState()가 있다.

  *setState는 onTap등의 이벤트 함수에서 화면 갱신을 시켜주는 함수이다.(builder가 다시 build함)

따라서 tile을 눌렀을 때 onTap이 작동되고, alreadyState값에 따라서 _saved에서 값을 추가하거나 제거한다.

즉, _buildRow에서 하트 icon과 하트 icon을 눌렀을 때의 이벤트를 추가된 것이다.

 

이제 하트 icon을 통해 저장된 _saved의 값들이 모인 view를 봐보자.

이건 build와 _pushSaved()에 있다. 

build를 보면 actions가 추가되어 있다. actions속성은 appbar에서 title 위젯 뒤에 row안에서 보여줄 위젯들을 의미한다.

(아래 그림을 보면 이해하기 쉽다.)

actions에 IconButton이 있고, 뒤에 눌렀을 때 실행한 함수가 있다. 이 함수가 _pushSaved()이다.

 

이제 _pushSaved를 봐보자.

_pushSaved안에 Navigator가 있다. Navigator는 화면 전환을 할 때 사용하는 위젯으로 stack 구조이다. 따라서 push를 하면 push 안에 정의한 화면이 나오고, pop을 하면 이전 화면이 나온다.

원래 Navigator는 BuildContext와 route 2개의 인자를 받는 데, Navigator.of(context)를 통해 BuildContext는 먼저 받아버린다. 그래서 Navigator.of(context) 다음의 함수에 route만 넣어주면 된다.

여기서 route는 뭘까? 리눅스에서 router는 네트워크에서 올바른 경로로 보내주는 것이라고 배웠었다. 하지만 flutter에서 route는 Navigator에 의해 이동하게 될 앱의 화면, 정보를 갖고 있는 것이다. 즉, Navigator로 보낼 화면 구성을 의미한다.

해당 코드에서는 MaterialPageRoute를 통해 Material 디자인이 적용된 route로 만들었다. tiles 변수에는 _saved안에 들어있는 모든 값들에 map안의 함수를 적용시킨 값이 들어있다. 즉, _saved안의 값들로 이루어진 tiles들이 들어있다. 

*여기서 ~.map()은 ~의 각 값들에 map()안에 들어있는 함수를 적용시키는 것을 의미한다.

*Flutter에도 iterable 개념이 있는데, iterable은 (반복 가능한) 집단을 의미한다. 예를 들어 list, array등이 있다. 또한 전제 조건이 순서가 있어야한다는 것이다. map은 순서가 없으므로 iterable이 아니다. 따라서 for문을 돌릴 수가 없는데, 이를 해결하기 위해 나온게 .map()이다.

divided 변수에는 ListTile.divideTiles를 통해 tile들 사이에 구분선을 넣은 값이 들어간다. 

divideTiles는 인자로 들어온 tiles 사이에 1픽셀 정도의 구분선을 넣어주는 함수이다. 이전 ListView에서 Divider를 넣었던 것을 여기서는 divideTiles로 구현한 것이다. 그리고 대망의 return 을 통해 Scafford에 정의된 화면을 보여준다.

 

정리

setState() - onTap()등의 이벤트에서 화면 갱신을 시켜주는 함수 

 

trailing - 위젯의 끝 부분에 trailing안의 위젯을 배치시키는 속성

 

Navigator - 화면 전환용 위젯(Stack구조)

              - push 면 push안의 화면으로 이동, pop은 이전 화면으로 이동

 

route - Navigator에 의해 이동하게 될 앱의 화면

 

~.map() - 배열이나 set, map등의 자료형의 각 값에 map안의 함수를 적용시키는 것

 

divideTiles - 인자로 들어온 tiles 사이에 1픽셀 정도의 구분선을 넣어주는 함수

 

actions 속성 - appbar의 title위젯 뒤에 1row정도의 부분에 위젯을 넣는 것