[008] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성8 - 제품 주문조회 페이지 만들기)

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

 

저번 포스팅에 이어 제품을 주문한 후에 주문을 조회할 수 있는 페이지 디자인을 해보도록 하겠습니다.

 

Step 1: my_order_list_page.dart 파일을 생성해주고 item_checkout_page.dart에 있던 소스 코드 파일을 전부 복사하여 붙여주고 클래스 이름만 MyOrderListPage로 수정해줍니다.

 

 

 

Step 2: models 폴더 안에 모델로 사용할 order.dart 파일을 생성해주고 다음처럼 추가해줍니다.

 

 

 

Step 3: enums 폴더를 만드시고 그 안에 각각 payment_status.dart 파일과 delivery_status.dart 파일을 만들어줍니다. 결제 상태와 배송 상태를 표시하기 위해 enum(열거형)을 사용하는데 DB에는 waiting, completed, cancelled 형태로 영어로 들어갈 때 실제 한국어로 보여줄 때 이를 비교하여 한글로 변환하여 화면에 표시하기 위함입니다. 

 

 

 

Step 4: delivery_status.dart도 작업합니다.

 

 

Step 5: my_order_list_page.dart 파일을 여신 뒤, quantityList 앞에 아래처럼 orderList 리스트 변수를 추가해줍니다. 이 파일의 전체 소스 코드는 맨 아래에 있습니다.

 

 

 

Step 6: 기존 checkoutContainer 부분을 orderContainer로 이름을 변경하시고 아래처럼 매개변수들을 추가해줍니다.

 

 

 

Step 7: 주문날짜를 표시할 수 있는 Container 위젯을 만들어줍니다.

 

 

 

Step 8: 합계 부분 아래에 조금 전 생성한 enum을 활용하여 statusName, 즉 상태 이름을 한글로 표시해줍니다.

아래에 4-5번째 줄처럼 import 먼저 진행해주시고 추가해주시면 됩니다.

 

 

Step 9: 주문취소 및 배송조회 버튼을 포함한 Row 위젯을 만들어주면 됩니다.

 

 

그리고 bottomNavigationBar 부분에 "홈으로" 버튼을 추가해주시면 됩니다.

 

Step 10: item_list_page.dart로 가셔서 Scaffold 위젯의 AppBar 안에 actions 부분을 만들어주고 IconButton들을 추가해주는데 첫 번째는 주문조회 페이지로 넘어갈 수 있는 버튼, 그 다음은 장바구니 페이지로 넘어갈 수 있는 버튼을 만들어주면 됩니다.

 

 

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

 

왼쪽 item_list_page.dart에서 우측 상단의 계정 아이콘을 클릭하면 오른쪽으로 이동합니다.

 

 

[전체 소스 코드]

 

[my_order_list_page.dart]

 

 

[유튜브 강좌 영상]

 

https://youtu.be/HQmL55iOLSA