모바일어플개발/Flutter 실전어플 개발(15)
-
[003] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성3 - 제품 장바구니 페이지 만들기)
안녕하세요~ totally 개발자입니다. 이번 시간에는 장바구니 페이지 UI 구성에 대해서 살펴봅니다. Step 1: item_basket_page.dart 파일을 생성하여 다음처럼 뼈대를 만들고 시작합니다. Step 2: 장바구니에 담긴 제품들을 표시할 ListView를 만들어주기 위해 Mock Data를 간단히 리스트 변수로 선언하여 줍니다. 먼저 UI에 중점을 두기 때문에 이렇게 하는 것이고 실제로는 이렇게 하면 안 되기 때문에 나중에 기능 부분을 구현할 때 이 부분은 당연히 수정할 것입니다. 먼저 기존 제품 리스트 변수처럼 2개 제품을 넣고, 27번째 줄에 quantityList를 별도로 만들어서 { key: value }를 { productNo: quantity } 형식으로 하여 제품 고유번호를..
2023.09.28 -
[002] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성2 - 제품 상세 페이지 만들기)
안녕하세요~ totally 개발자입니다. 이전 강좌에 이어 이번 포스팅에서는 제품 리스트에서 각 제품을 클릭했을 때 각 제품의 상세 페이지로 이동해줄 수 있도록 상세 페이지를 만들어보도록 하겠습니다. Step 1: constants.dart 파일을 먼저 생성해줍니다. Step 2: 저번 시간에 item_list_page.dart에서 만들었던 NumberFormat 부분이 계속 사용되고 중복되는 관계로 이 변수를 constants.dart 파일 여기로 분리해줍니다. 아래 부분을 없애주시고, 아래 constants.dart 파일에 다음처럼 복사해주신 뒤, 그 후에 오류로 표시되어 있는 numberFormat에 필요한 이 부분을 임포트하여 줍니다. item_list_page.dart에서 constants를 임..
2023.09.28 -
[001] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성1 - 제품 리스트 페이지 만들기)
안녕하세요~ totally 개발자입니다. 그 동안의 플러터 기본기를 통하여 간단하면서도 중요한 기능들은 포함한 (PG 기능은 실제로 구현하지는 않지만 필요한 입력값들은 다 받고 주문완료까지 표시해줄 수 있도록 만들 계획입니다. 구성은 아래와 같습니다. UI 구성(제품 리스트, 제품 상세, 장바구니, 결제시작, 구매완료, 구매내역 확인, 구매 취소 등등) 백엔드 연동 (제품, 주문내역 등 데이터베이스 테이블로 저장 및 불러옴) Step 1: 플러터 쇼핑몰 앱 제작에 필요한 프로젝트는 이미 준비되어 있다고 가정하고 시작합니다. 실제 업무에서는 디자인 팀에서 제공해주는 Figma, XD 등 디자인 툴을 이용하여 UI를 보고 따라하지만 여기에서는 그런 과정을 모두 생략하고 MVP 형식의 제일 간단한 UI로 진행..
2023.09.24