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
Customize design
-
애니메이션 추가하기
이 단계에서는 애니메이션을 추가하고 글꼴과 앱 색상을 변경하며 다크 또는 라이트 테마 모드를 설정합니다.
애니메이션을 사용하면 앱이 보다 세련되게 보입니다. 'card_54_TravelCard' 위젯에 슬라이드 애니메이션을 추가해 보겠습니다.
https://www.loom.com/share/634d6da7749f4703933778bfcfedbed4?sid=9616eec9-045a-4aaa-a8ab-240647d248f9
-
타이포그래피 변경
이 앱에 개인 맞춤화 요소를 더해 보세요. FlutterFlow를 사용하면 앱 전체에서 글꼴 스타일을 완전히 제어할 수 있습니다. 각 위젯마다 글꼴을 변경할 필요가 없습니다. Typography 섹션으로 이동하여 앱 전체의 글꼴 조정을 하시면 됩니다.
https://www.loom.com/share/6870d896ba3745369d883abd207f844f?sid=f4d8f218-fb63-494e-9db1-81c376227209
-
앱 색상 변경 (다크 또는 라이트 테마 모드 설정)
앱의 외관을 변경하려면 테마 설정 > 색상 메뉴에서 색상을 변경할 수 있습니다. 또한 여기서 어두운 테마 또는 밝은 테마 색상을 설정할 수 있습니다.
<aside> 💡 캔버스의 다크/라이트 모드 스위치를 사용하여 앱이 어떻게 보일지 확인할 수 있습니다.
</aside>
기본적으로 어두운 테마 지원은 이미 활성화되어 있으며 색상이 그에 맞게 설정되어 있습니다. 사용자가 테마를 변경할 수 있는 방법을 제공하기만 하면 됩니다. 이제 액션을 추가하는 방법을 알았으므로 앱의 어디에든 버튼을 추가한 다음 'Set Dark Mode Setting' 액션을 추가할 수 있습니다.
https://www.loom.com/share/19698b96ce00467e90dde80b1b61b02a?sid=f970895a-2771-498e-9507-c5ed1652b43b
-
데이터와 로직 추가하기
이 단계에서는 앱을 기능적으로 만들기 위해 필요한 모든 데이터와 로직을 추가할 것입니다.
-
Create a custom data type
각 장소에 대해 이름, 이미지, 평점 및 즐겨찾기 상태를 표시합니다. 모든 장소에 대한 이 정보를 보유하기 위해 우리는 '장소'라는 사용자 정의 데이터 유형을 만들고 이러한 필드를 추가할 수 있습니다.
<aside> 💡 팁: 이미 스타터 앱에서 이 데이터 타입이 생성되어 있습니다.
</aside>
여기에는 추가 한 후에 어떻게 보이는지가 있습니다.:
'place' custom data type
-
Create app state variable
앱 상태 변수는 앱 전체에서 접근 가능합니다. '장소'라는 이름으로 '장소' 데이터 유형(이전 단계에서 만든 것)을 사용하여 하나를 만들어 봅시다. 이것은 장소 목록을 저장하는 데 사용됩니다.
만든 후에는 '필드 수정'을 클릭하여 장소에 대한 일부 데이터를 추가할 수 있습니다.
<aside> 💡 팁: 시작 앱에서 이미 이 변수가 생성되어 있습니다.
</aside>
Here's how it looks:
-
Showing a list of places on Home page
ListView 위젯에 장소를 표시하려면 먼저 변수에서 하위 항목 생성을 하고, Set from Variable 메뉴 > [generate_children_from_variable_name] item을 사용하여 위젯에서 데이터를 표시합니다. Available Options를 Data Structure Field > Field로 설정하여 데이터를 표시할 필드를 선택하세요.
https://www.loom.com/share/37aa1a5416984c4ea720437cea21934d?sid=9e647e7d-c4c1-48d6-a1cf-d660f3fed15f
-
Adding a condition to determine the place status
즐겨찾기로 표시된 장소인지 아닌지를 결정하는 조건을 추가해 봅시다. 2.1 단계에서 추가한 ConditionalBuilder 위젯 내부 > IF 섹션 > Unset 선택 > [generate_children_from_variable_name] item > Data Structure Field > Field 이름(i.e., 'is_favorite'와 같은 즐겨찾기 상태를 보유하는 필드 이름)을 선택합니다.
<aside> 💡 여기에서는 'is_favorite' 값이 불린 변수이기 때문에 직접 값을 제공했습니다.
</aside>
즉, 해당 장소가 즐겨찾기로 표시되면 If 위젯 아래에 추가된 위젯이 표시됩니다. 즉, 실선 하트 아이콘입니다. 그리고 그렇지 않으면 Else 위젯 아래에 있는 위젯, 즉 윤곽선 하트가 표시됩니다.
https://www.loom.com/share/05b9ac6654c74cdaaff5b55d890dad5d?sid=e9752b69-6206-4370-aa78-dc0ff9794375
-
Update place status
사용자가 하트 아이콘 버튼을 클릭할 때마다 앱 상태 변수를 업데이트해야 합니다. 이를 앱 상태 업데이트 액션을 사용하여 수행할 수 있습니다.
<aside> 💡 두 개의 IconButton 위젯에이 작업을 추가해야합니다. 하나는 상태를 거짓으로 표시하고 다른 하나는 참으로 표시합니다. 팁: 작업 복사 붙여 넣기를 사용하여 속도를 높일 수 있습니다.
</aside>
https://www.loom.com/share/a1f0f94e672f413cb995997324cdd3b7?sid=c2212855-0803-4f91-a018-2f8019db8fe5
-
Showing places on Favorites page
'즐겨찾기' 페이지에서 장소를 표시하는 방법은 대부분 '홈' 페이지와 유사합니다 (단계 [4.3] 참조). 주요 차이점은 '즐겨찾기' 페이지에서 장소를 필터링하여 즐겨찾기로 표시된 장소만 표시해야 한다는 것입니다.
Here's how you do it:
https://www.loom.com/share/2811539bb201435abe4a6056278cdfc6?sid=8ce38a81-1383-4cdc-9f52-8da82a6e54a7
-
-
Running the app
이제 실행해서 어떻게 작동하는지 보는 시간입니다. FlutterFlow를 사용하면 실행 모드에서 앱의 완전한 기능을 테스트할 수 있습니다. 실행 모드는 일반적으로 프로젝트의 크기에 따라 약 2~4분 (또는 그 이상)이 걸립니다. 그러나 변경 사항을 즉시 확인하려면 Flutter의 "핫 리로드" 기능을 사용하는 테스트 모드에서 앱을 실행할 수 있습니다.
Running the app