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

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

 

저번 포스팅에 이어 결제시작 페이지를 작업해보겠습니다. 먼저 우편번호 부분을 API를 통해 구현할 것입니다.

 

Step 1: pubspec.yaml에 kpostal 패키지를 추가하고 터미널에 flutter pub get 입력해줍니다.

 

 

kpostal 패키지 참고

https://pub.dev/packages/kpostal

kpostal | Flutter Package

 

Step 2: 안드로이드와 ios 세팅을 위해 아래 부분을 넣어줍니다.

 

안드로이드 (android > app > src > main > AndroidManifest.xml

IOS (ios > Runner > Info.plist)

 

 

Step 3: item_checkout_page.dart에 import 해줍니다.

 

 

 

Step 4: 우편번호를 위해 receiverZipTextField 부분을 수정해줍니다. 여기에는 Row로 감싸주고 TextFormField 바깥에 Expanded 위젯을 감싸주어 constraints 오류가 없도록 작업해줍니다. 빨간색 박스 부분 특히 KpostalView 안에 callback 부분은 우편번호를 검색하고 선택하고 데이터를 불러오기 위함입니다. 

 

그 후 위처럼 readOnly: true를 넣어 수정이 불가능하게 만들어줍니다.

 

결과는 아래와 같습니다.

 

 

위와 같이 우편번호 작업을 간단하게 마무리할 수 있습니다.

 

 

Step 5: 다음으로 비회원 주문조회 비밀번호 부분에 텍스트가 보이지 않도록 설정하여 줍니다. (아직 validate는 진행하지 않습니다)

 

 

Step 6: 카드 정보 입력 부분도 다음처럼 지정합니다 maxLength는 최대 문자 길이이고 카드명의자 부분에는 주민번호 앞자리 6자리가 들어갈 수도 있고 법인카드처럼 상황에 따라 사업자등록번호가 들어가는 경우도 있어 최대 10자리로 지정하였습니다. 카드만료일은 연도+월이므로(예 202705) 6자리로 지정하였고 카드 비밀번호 앞2자리 역시 가려야 하므로 obscureText: true를 지정하면 됩니다. 

 

 

이 포스팅에서는 여기까지 진행하고 다음 시간에는 결제수단 선택 등 결제시작 페이지 UI 마무리 작업을 하도록 하겠습니다. 감사합니다.

 

[전체 소스 코드]