앱에서 찾을 수 있는 일반적인 기능 중 하나는 연락처 목록입니다. 이번 포스트에서는 연락처 목록의 레이아웃을 작성해 보도록 하겠습니다.
이번 포스트는 아래 내용을 다루고 있습니다.
- 연락처 모델 만들기
- ListTile 위젯 개요
- ListTile 위젯으로 레이아웃 만들기
지난 코드 살펴보기
수직으로 스크롤하는 목록 뷰가 있는 상태에서 소스코드를 수정해 보도록 하겠습니다.
매터리얼 앱으로 home 속성에 Scaffold 위젯을 설정하고 있고 body 속성에 다시 Home 위젯을 불러오고 있습니다. Home 클래스는 StatelessWidget으로 build 메소드에서는 화면을 꽉 채우는 Container를 리턴해 주고 있습니다.
Container위젯의 child로는 ListView의 separated 생성자로 Listview 위젯을 만들고 있습니다. separated 생성자의 자세한 내용은 이쪽 포스트를 참고해 주세요.
위 코드로 만들어진 화면이 아래 화면입니다.
이제 리스트의 컬러 상자 대신 텍스트와 아이콘이 포함된 위젯으로 만들어 보겠습니다.
연락처 모델 만들기
먼저 목록 데이터를 포함할 모델 클래스를 아래와 같이 만들었습니다.
실제 프로젝트에서는 연락처의 데이터들은 데이터 베이스를 사용하지만, 예제에서는 비즈니스 로직을 최소화하고 레이아웃에 집중하기 위해 메모리에 데이터를 저장하도록 하겠습니다. 아래가 연락처를 반환하는 메소드 입니다.
Icons 클래스를 연락처의 캐릭터를 대신하고 있습니다. Icons 클래스를 더 알고 싶으면 아래 링크를 참조해 주세요.
https://api.flutter.dev/flutter/material/Icons-class.html
ListTile 위젯 개요
연락처를 표시하는 메소드를 만들기 전에 ListTile 위젯에 대해 간단히 알아보도록 하겠습니다.
위의 예가 ListTile로 만든 레이아웃입니다.. ListTile은 고정 높이의 단일행의 위젯입니다. 그리고 텍스트와 선행 아이콘, 후행 아이콘을 포함하고 있습니다. ListTile에는 title 속성이 있으며 필수 항목입니다. 그리고 subtitle(최대 두줄), leading, trailing, 속성을 가지고 있습니다. 지금 만드려고 하는 연락처 리스트에 매우 적합한 위젯입니다.
ListTile 위젯으로 레이아웃 만들기
이제 실제 연락처를 표시할 ListTile 리스트를 반환하는 showContacts 메소드를 만들겠습니다.
showContacts는 ListTile의 리스트를 반환해주는 메소드 입니다.
1. contacts 변수는 buildContacts 메소드를 호출해 연락처 데이터를 담고 있습니다.
2. 현재는 5개의 연락처 데이터가 존재하므로, 많은 더미 데이터를 만들기 위해 루프문을 돌며 buildContacts 메소드를 호출해 100개의 연락처를 추가로 contacts 변수에 추가했습니다.
3. ListTile 타입의 List 변수를 선언해 빈 배열을 할당하였습니다.
4. contacts에 들어있는 각 연락처에 대해 ListTile을 만들어 list에 추가하고 있습니다. ListTile 위젯에서는 title, subtitle 속성에 Text위젯을 만들고 연락처 데이터(contact)의 name과 subtitle을 설정해 주었습니다. leading에서는 CircleAvatar 위젯을 설정해 주었고 child로 contact에 들어있는 Icon을 설정하고 있습니다. trailing의 오른쪽에 배치되는 위젯으로 화살표 아이콘을 설정해 주었습니다. onTap 속성에서는 ListTile을 클릭했을 때 콜백 되는 함수를 설정할 수 있습니다. 보통은 화면 이동을 하게 되는데 예제에서는 아무것도 하지않고 단지 true를 반환하고 있습니다.
이제 showContacts 메소드를 호출하도록 수정하겠습니다.
Container의 child에서 ListView를 설정해 주었고, children속성에 ListTile 리스트를 반환하는 showContacts를 호출하고 있습니다.
코딩이 다 끝났습니다. 화면을 보면 다음과 같습니다.
그럴싸한 연락처를 ListTile과 ListView를 활용해 쉽게 만들 수 있었습니다.
여기까지 수고하셨습니다. 다음 포스트에서는 GridView를 다뤄보도록 하겠습니다.
'프로그래밍 > Flutter' 카테고리의 다른 글
| [Flutter Layout] 15. PopupMenuButton(팝업메뉴버튼) 내비게이션 만들기 (0) | 2022.04.21 |
|---|---|
| [Flutter Layout] 14. 플러터 갤러리 만들기(using GirdView) (0) | 2022.04.15 |
| [Flutter Layout] 12. ListView Separated 생성자(구분 위젯이 있는 리스트 만들기) (0) | 2022.04.11 |
| [Flutter Layout] 11. ListView, 스크롤 가능한 레이아웃 만들기 (0) | 2022.03.29 |
| [Flutter Layout] 10. Stack 위젯 레이아웃 실습 (0) | 2022.03.29 |
댓글