Flutter 기초(5) - 첫 번째 앱 작성하기 Part2 ( Navigator 와 route )

이번 글에서는 저번 글에서 만들었던 무한으로 생성되는 단어쌍 추천 어플을 한 단계 더 발전시켜 보겠습니다.

단어쌍마다 하트 버튼이 존재하고, 하트 버튼을 누르면 보관함에 보관할 수 있게 만들겠습니다.

 

먼저 저번에 만들었던 프로젝트를 불러오겠습니다. 그리고 main.dart의 State 클래스에 다음을 추가해주겠습니다.

하트 버튼을 누른 단어들을 저장할 _saved 변수를 Set 형태로 추가해주겠습니다. 그 이유는 Set는 고등학교 때(?) 배웠던 수학의 집합이라고 생각하시면 되는데, 변수 안에 중복된 것을 허용하지 않기 때문입니다. 그래서 단어쌍이 중복 저장되는 것을 막을 수 있습니다.

 

그리고 ListTile을 그려주는 즉, 무한 리스트 뷰의 아이템을 그려주던 _buildRow 함수에 다음과 같이 추가해줍니다.

먼저 alreadySaved 라는 변수에 현재 그리려는 단어쌍이 보관함에 저장 여부를 담아줍니다.

trailing 속성에 대해서는 flutter 공식 문서에 다음과 같이 나와 있습니다.

A widget to display after the title.
Typically an Icon widget.
To show right-aligned metadata, consider using a Row with MainAxisAlign.

title 뒤에 표시되고, 보통 Icon 위젯을 표현한다고 합니다. 그리고 주로 Row의 오른쪽에 정렬됩니다.

trailing에서 보여줄 아이콘 코드를 살펴보면, 저장 여부에 따라서 다르게 보여주게 됩니다.

Dart의 삼항 연산자를 이용하여 이미 저장돼있다면 Icons.favorite, 아니라면 Icons.favorite_border를 보여줍니다. color도 동일하게 이미 저장돼있다면 빨간색, 아니라면 색을 띄지 않습니다. icon에 대해서 자세히 알아보시려면 여기를 참조해주세요.

 

여기까지 적용하면 위 화면처럼 보입니다.

 

다음은 단어쌍을 보관할 수 있게 만들어 보겠습니다.

ListTile에 onTap이라는 속성을 추가해주도록 하겠습니다. flutter 공식 문서에서 onTap에 대한 문서를 보면 onTap이라는 속성은 Widget마다 추가할 수 있는 것으로 보입니다. 그리고 해당하는 위젯이 눌렸을 때 함수를 실행할 수 있습니다.

onTap 속성을 추가하여 이미 저장된 단어쌍이라면 _saved Set에서 제거해주고, 아니라면 추가해주는 로직을 실행함을 볼 수 있습니다.

위와 같이 항목을 클릭하면 하트 버튼이 빨갛게 칠해지는 것을 볼 수 있습니다.

이제는 새로운 페이지(Flutter에서는 route라고 부릅니다.)를 만들어 이동하는 기능을 추가하겠습니다.

Flutter에서는 home route에서 새로운 route로 간다고 말합니다. Flutter에서는 Navigator가 앱의 route stack을 관리합니다. 만약 새로운 route로 가면 새로운 route가 Navigator의 stack에 push 되고, 이전 route로 가게 된다면 Navigator의 stack에서 route가 pop됩니다.

 

이제 실제 구현을 해보겠습니다. 먼저 버튼을 app bar에 만들어 주겠습니다.

Scaffold 위젯의 AppBar 영역에 list 버튼을 추가해줍니다. 버튼이 눌렸을 때는 _pushSaved라는 함수를 실행하도록 하고, _pushSaved 함수를 같은 클래스에 생성해줍니다. _pushSaved에서는 Navigator에 새로운 route를 push 해주는 기능을 넣습니다.

Navigator의 push 함수에는 새로운 route를 만들어주는 익명함수가 들어갑니다.

_saved에 저장되어있는 item들마다 ListTile을 mapping 시켜줍니다. .map 메서드가 그 역할을 수행합니다. 그리고 tiles에 저장되어있는 ListTile들을 ListTile.divideTiles 함수를 통해 구분선을 넣어주고, divided라는 List에 넣어줍니다.

마지막으로 divided List가 담긴 ListView를 Scaffold에 담아서 return 해줍니다. 이 Scaffold가 Navigator에 push 되면서 화면에 그려지게 됩니다.

근데 여기서 자세히 보시면 App Bar 영역에 뒤로가기 버튼을 보실 수 있습니다. 뒤로 가기 버튼을 생성한 코드가 없는데도 말이죠. 이는 Navigator Stack이 쌓이게 되면 자동으로 생기게 되고, 뒤로 가기 버튼을 누르면 Navigator에서 현재 route가 pop 되면서 이전 Stack의 route를 보여주게 됩니다.

 

마지막으로 UI 테마를 변경해주고 마무리 하겠습니다.

맨 처음 만들어주었던 Stateless 부분에는 MaterialApp을 그리고 있습니다. 여기서 theme 속성을 변경해주면 UI 테마를 변경할 수 있습니다.

이상으로 Flutter 첫 번째 앱을 만들어보았고, 다음은 슬슬 제가 만들고 싶은 앱에 필요한 부분들을 차근차근 공부해 나가보겠습니다.