이 튜토리얼은 인기 있는 여행지를 소개하는 여행 앱을 만드는 방법을 안내합니다. 사용자는 추천 장소 목록을 탐색하고 하트 아이콘을 탭하여 쉽게 즐겨찾기에 추가할 수 있습니다. 또한, 즐겨찾기한 모든 장소를 새로운 페이지에서 볼 수 있습니다.
완성된 모습은 다음과 같습니다:
https://www.loom.com/share/d99266c8070040b9a7484646e457e09e?sid=ea1f9474-5c69-4315-884d-7e4786d7627b
<aside> 💡 배울 내용
앱 만들기
앱을 만드는 단계는 다음과 같습니다.:
Clone or create a project
프로젝트를 시작하려면, 새 프로젝트를 생성하는 것이 첫 번째 단계입니다. 그러나, 더 쉽게 시작하기 위해 이미 시작 앱을 만들어 놓았습니다. 단지 이 링크를 열어 'Clone' 버튼을 클릭하면, 프로젝트가 즉시 계정에 추가됩니다.
https://www.loom.com/share/f8522aeb0c654f6faa3b97cf1d55bb22?sid=db75ef5c-7584-4160-bd66-347447a2442e
Building the UI
이 단계에서는 '홈'과 '즐겨찾기' 페이지의 UI 요소 또는 위젯을 추가하고 두 페이지 간의 탐색을 추가합니다.
Building Home page
이 페이지는 인기있는 장소를 모두 보여줍니다. 팁: 스타터 앱에서 이미 이 페이지를 만들어 놓았으므로 바로 위젯을 추가할 수 있습니다.
홈페이지 구축하기:
AppBar에 IconButton 위젯을 추가합니다. 속성 패널에서 Fill Color, Border Color 및 Border Width를 제거합니다. 그런 다음 하트 아이콘을 설정합니다. 이것은 사용자가 즐겨찾기 페이지로 이동할 수 있도록 해줄 것입니다.
https://www.loom.com/share/38a5170871434937aa4d680bdabb24e5?sid=6eb8d9c4-c2b1-4ea3-9cc7-0bf50e8ea8bc
위젯 트리를 열어 ListView 위젯을 Column 내부에 추가하고, 속성 패널에서 Expanded로 설정하여 모든 사용 가능한 공간을 차지하도록 합니다.
ListView 내에서 Templates에서 'card_54_TravelCard'를 추가하고, 가격 컨테이너 위젯을 제거하세요.
https://www.loom.com/share/9623f44203cc41448148a6cf2d55fb33?sid=51de6850-5563-4b31-9640-92dbe459b840
목적지 이름 오른쪽에 조건부 빌더 위젯을 추가하십시오. 이 위젯은 장소가 즐겨찾기로 표시되었는지 여부에 따라 동적으로 다른 하트 아이콘을 표시합니다. 이 가이드의 이후 섹션에서 조건을 추가합니다. 지금은 단순히 IF와 ELSE 조건에 대해 활성화 및 비활성화 된 하트 아이콘을 가진 IconButton 위젯을 추가하십시오.
https://www.loom.com/share/7989a4ae391f4a839e8a37cedb503884?sid=90018a77-c578-43ed-a523-2e62863f8418
즐겨찾기 페이지 만들기
Favorites(즐겨찾기) 페이지는 사용자가 저장한 즐겨찾기 장소의 목록을 보여줍니다. "Lists > List 08 - Product List" 템플릿에서 새로운 페이지를 추가해보세요.
이름을 지정하고, 불필요한 위젯을 제거한 다음 AppBar 유형을 변경하여 디자인에 맞게 맞추세요.
https://www.loom.com/share/ad2a62292bd34225ab297f5650fd301e?sid=4fa31250-a489-4cc9-af78-9eaf12d744db
홈에서 즐겨찾기 페이지로 이동하기
홈 페이지에서 위젯 (즉, 앱 바의 하트 아이콘 버튼)에 Navigate To 동작을 추가하여 즐겨찾기 페이지로 이동할 수 있습니다.
https://www.loom.com/share/e03a0d5438864c12b92b9becaa49c696?sid=75e61959-8083-4baa-9cff-a2173ff3066e