[006] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성6 - 제품 결제시작 페이지 만들기 3)

안녕하세요~ totally 개발자입니다.

 

이 포스팅에서는 지난 시간에 이어 결제수단 옵션을 선택하고 간단한 양식 검증(비어 있는지 비밀번호가 일치하는 지 정도만 체크)해서 주문완료 페이지로 이동할 수 있도록 진행합니다.

 

지난 포스팅까지 진행하신 분들이라면 이 포스팅에서는 변경되는 부분이 많기에 잘 확인하시면서 따라오셔야 합니다.

 

Step 1: item_checkout_page.dart에 아래 변수들을 선언해줍니다. 있는 경우에는 넘어가시면 됩니다.

 

 

Step 2: 지난 포스팅을 하신 분들이라면 여기에서 잘 변경을 해주셔야 하는데 기존에 입력하는 TextFormField를 우편번호 부분을 제외하고 하나로 통합하기 위해 inputTextField 위젯을 별도로 만들어주고 다음처럼 설정을 해줍니다. 파라미터들을 통해 각각 매개변수를 넘겨주고 validator를 통해 간단한 빈 칸 검증 및 비밀번호인 경우 일치하는지만 체크해주었습니다. (자세한 설명은 유튜브 강좌에 언급합니다)

 

 

Step 3: 결제수단 옵션 Dropdown 버튼 위젯을 만들어 줍니다. 위에 선언한 변수들을 사용하여 구성할 수 있으며 items 부분에 기존 리스트 변수와 map를 활용하여 DropdownMenuItem 위젯을 쭉 생성해주면 됩니다.

 

 

 

Step 4: 지난 포스팅까지 따라오신 분들께서는 이 부분에서 많은 수정이 들어갑니다. 기존 위젯들 중 receiverZipTextField를 제외한 부분을 모두 제거하고 inputTextField에 매개변수만 달리 해서 추가해주시면 되고 카드결제를 선택했는지, 무통장입금을 선택했는지 여부에 따라 위젯을 다르게 보여줄 수 있도록 구성합니다. (반드시 이렇게 해야 하는 것은 아닙니다. 각각 실무 환경에 따라 적절한 방법을 선택해서 사용하시면 됩니다) 또한 Form 위젯과 formKey를 key값으로 넣어주시면 됩니다. 전체 소스 코드는 맨 아래에 있습니다.

 

 

 

Step 5: 제가 inputTextField는 item_checkput_page.dart에서 별도로 분리했지만 실제 component로 이렇게 구성해서 분리하는 것을 더 권장을 드리고 있습니다. 그래서 Dialog 경우에는 components 폴더를 만들고 그 안에 basic_dialog.dart 파일로 별도로 생성해서 만들어주었습니다. 모든 입력 내용을 입력했으나 결제수단을 선택하지 않을 때 이 Dialog가 나오게 하기 위함입니다.

 

 

Step 6: 결제 버튼 클릭했을 때 이동되는 item_order_result_page.dart를 만들어주고 틀만 보여질 수 있게만 구성합니다. 다음 포스팅에 주문완료 페이지를 제대로 구성할 예정입니다. 

 

 

Step 7: 다시 item_checkout_page.dart로 가셔서 이 부분들을 import 해주세요.

 

 

Step 8: 마지막으로 결제하기 버튼을 눌렀을 때 비밀번호 일치와 빈 칸이 아닌지를 검증하고 결제수단선택이 카드결제나 무통장입금으로 되어 있지 않은 경우에는 Dialog를 띄워줍니다. 모두 통과된 경우라면, ItemOrderResultPage로 이동해주면 됩니다.

 

 

Step 9: 실행한 모습입니다.

 

 

 

 

[전체 소스 코드]

 

[item_checkout_page.dart]

 

 

[item_order_result_page.dart]

 

 

[유튜브 강좌 영상]

 

https://youtu.be/luWTQ1tKIHc