쇼핑몰앱개발(9)
-
[006] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성6 - 제품 결제시작 페이지 만들기 3)
안녕하세요~ totally 개발자입니다. 이 포스팅에서는 지난 시간에 이어 결제수단 옵션을 선택하고 간단한 양식 검증(비어 있는지 비밀번호가 일치하는 지 정도만 체크)해서 주문완료 페이지로 이동할 수 있도록 진행합니다. 지난 포스팅까지 진행하신 분들이라면 이 포스팅에서는 변경되는 부분이 많기에 잘 확인하시면서 따라오셔야 합니다. Step 1: item_checkout_page.dart에 아래 변수들을 선언해줍니다. 있는 경우에는 넘어가시면 됩니다. Step 2: 지난 포스팅을 하신 분들이라면 여기에서 잘 변경을 해주셔야 하는데 기존에 입력하는 TextFormField를 우편번호 부분을 제외하고 하나로 통합하기 위해 inputTextField 위젯을 별도로 만들어주고 다음처럼 설정을 해줍니다. 파라미터들을..
2023.11.04 -
[004] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성4 - 제품 결제시작 페이지 만들기 1)
안녕하세요~ totally 개발자입니다. 이번 포스팅에서는 결제시작 페이지 UI 구성에 대해 살펴보도록 하겠습니다. Step 1: item_basket_page.dart를 복사하셔서 이름을 item_checkout_page.dart로 변경해줍니다. 클래스, State 명도 모두 변경해줍니다. Step 2: basketList 변수를 checkoutList로 이름을 변경해주고 quantityList는 그대로 내버려둡니다. Step 3: 아래에 있는 basketContainer 위젯의 이름을 checkoutContainer로 변경해줍니다. Step 4: 다음 부분처럼 title과 basketList를 checkoutList로 변경해주시면 됩니다. 또한 53번째 줄에 basketContainer를 checko..
2023.10.09 -
[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