[Flutter] 1. 플러터로 만드는 첫 번째 앱 (3) - ListTile에 아이콘을 추가하여 이름 저장하기

* 플러터를 원문 공식 문서 (https://flutter.dev/docs)를 읽으면서 공부하는 과정에서 정리하고자 작성하는 포스팅으로

저는 플러터 실무 개발 경력이 없는 대학생인 점을 미리 밝힙니다.

* 추가로 오준석의 플러터 생존코딩 및 제 개인 경험을 참고하여 작성하고 있습니다.

* 오역, 오탈자, 잘못된 내용의 지적은 항상 감사히 받겠습니다 :)

---

이 문서의 내용은 https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2#3

첫 Flutter 앱 작성, 2부  |  Google Codelabs

이 내용을 따릅니다.

이 페이지의 경우 한국어 번역이 꽤 잘되어 있으니, 위 사이트의 내용을 참고해도 좋을 것 같습니다.

다만, 저는 위 사이트에서 설명하지 않는 내용들도 추가로 공식문서를 참고하여 보충하여 서술하겠습니다.

 

또한 이 포스팅부터는, 각 위젯의 생성자로 들어가는 이름있는 인자를 '속성' 으로 표현하겠습니다.

우리가 코드에 작성하는 위젯은 Text("hi", style : TextStyle(~~)); 와 같은 형태입니다.

 

다트 문법에서는 함수 인자에 이름을 붙일 수 있고,

해당 이름을 명시하여 원하는 인자에 원하는 값을 전달할 수 있습니다.

따라서 위 예시에서 style은 문법적으로 'style' 이라는 이름의 인자(parameter)로 볼 수 있습니다.

 

하지만 원서에서는 이를 속성(property)으로 표현하고 있고, 저 역시 이게 위젯이라는 객체의 옵션같은 느낌으로서

'인자'라는 표현보다 더 와닿는다고 느껴 표현을 속성으로 수정하고자 합니다.

따라서 앞으로는 style 속성에 TextStyle() 객체를 추가한다고 표현하겠습니다.

 

하지만 실제로는 Text() 객체의 생성자(함수)의 style이라는 이름의 인자에 TextStyle() 객체를 넘겨주는 것이

실제 작동 방식이라고 이해하면 좋을 것 같습니다.

---

이전 앱에서 이름을 랜덤하게 생성해주는 것은 성공했지만,

랜덤하게 생성된 이름을 선택해서 저장하는 것은 아직 만들지 않았습니다.

사용자가 원하는 이름을 선택할 수 있게, 그리고 선택한 이름을 저장할 수 있게 하겠습니다.

 

선택한 이름을 저장하기 위해 다양한 자료구조를 사용할 수 있겠지만,

공식 문서에서는 Set 자료구조를 선택했고, 저도 Set 자료구조를 사용했을 것 같습니다.

 

이름을 저장할 때 중복되는 이름을 저장할 필요가 없는데다,

이름을 저장하는데 특별한 순서도 없기 때문입니다.

 

사진처럼 State 클래스에 저장한 이름을 담을 set 객체를 선언합니다.

Dart 언어에서는 set, list와 같은 자료구조를 기본 내장 자료형으로 제공합니다.

 

set 객체를 선언할 때는

var a = <String>{};
var b = {'hi', 'my', 'name', 'is', 'EverDu'};

이렇게 선언할 수 있습니다.

하지만 주의할 점이 하나 있습니다.

 

var c = {}; // 이건 Map 입니다. (파이썬의 딕셔너리)

이렇게 선언하면, c의 자료형은 역시 내장 자료형으로 존재하는 Map 자료형이 됩니다.

파이썬과 유사하게, { } 만 선언하면 set이 아닌 Map으로 인식합니다.

따라서 비어있는 set을 선언할 때는 <자료형>{}; 형태로 선언해야 합니다.

 

Set<String> d = {};

아니면 이렇게 명시적으로 자료형을 붙여 선언하면 됩니다.

 

자세한 내용은 dart 공식 문서

https://dart.dev/guides/language/language-tour#sets

A tour of the Dart language

이 문서를 읽어보길 추천합니다.

---

이렇게 이름을 저장할 Set 객체를 선언했으면

리스트를 만드는 함수 _buildRow() 함수를 수정합니다.

 

우선 이미 저장한 이름인지 확인하는 변수를 추가합니다.

 

그 이유는 이미 저장한 이름이라면 하트에 저장한 이름이라고 표시가 되어야하고,

저장하지 않은 이름이라면, 저장하지 않은 이름으로 하트에 표시가 되어야 하기 때문입니다.

 

이제 ListTile에 하트 아이콘을 추가하겠습니다.

 

ListTile() 위젯은 최대 3줄의 텍스트를 담을 수 있고, 옆에 추가로 아이콘이나 위젯을 붙일 수 있습니다.

이때 붙이는 위치는 타일의 왼쪽, 또는 오른쪽인데

왼쪽에 붙일 때는 leading 속성에, 오른쪽에 붙일 때는 trailing 속성에 위젯이나 아이콘을 달아주면 됩니다.

 

우리는 오른쪽에 하트 아이콘을 달기 위해 trailing 속성에 Icon() 위젯을 추가했습니다.

이때 삼항 연산자인 ? : 를 이용하여 만약 우리가 저장한 이름이면 빨간색으로 색이 채워진 빨간 하트아이콘을,

저장하지 않은 이름이면 색이 없는 (null) 테두리만 있는 하트아이콘을 그립니다.

 

Icon() 객체는 반드시 Icons() 클래스의 IconData를 속성으로 가져야 하며,

우리는 빨간색으로 속을 채운 하트를 위해 color 속성을 추가로 사용하였습니다.

 

리로드를 해보면, 하트가 추가되어 있음을 알 수 있습니다.

 

물론 아직은 하트를 클릭해도 아무런 변화가 없습니다.

---

이제 하트를 터치해서 상호작용을 할 수 있게 해보겠습니다.

(정확히는 하트가 아닌 ListTile() 위젯입니다.)

 

리스트 타일의 터치 이벤트를 감지하려면 onTap 속성에 콜백함수를 추가합니다.

(콜백함수는 특정 상황에 자동으로 호출되는 함수입니다.)

다음과 같이 작성합니다.

 

onTap 속성에는 'void function' 자료형의 함수가 들어가야 하기 때문에 익명함수를 사용하여야 합니다.

('void를 리턴하는 함수'를 직접 호출하면 안됩니다. 이 경우 리턴하는 자료형이 'void' 입니다.)

 

따라서 () { } 형태의 익명함수를 사용하여 (이는 'void funtion' 자료형입니다.)

setState() 함수를 호출합니다.

 

지난 포스팅에서 StatefulWidiget은 중간에 상태가 변할 수 있는 클래스라고 했었습니다.

하지만 아직 중간에 상태가 변하는 것을 보여준 적은 없었습니다.

이 setState() 함수는 위젯의 수명주기 중에 상태(State)를 갱신하는 함수입니다.

 

만약 이미 하트를 선택했었다면 _saved 셋에 pair 객체가 있던 것이니

해당 객체를 제거하고 상태(State)를 갱신합니다.

그러면 상태를 갱신하면서 위젯을 다시 그리기 때문에 하트의 모양이 변화합니다.

(정확히는 각 위젯이 갖고있는 메소드 중 Build() 메서드를 다시 호출합니다.)

 

 리로드를 해보면 다음과 같이 나옵니다.

---

다음 포스팅에서는 이렇게 저장한 이름들의 목록을 볼 수 있도록 해보겠습니다.