모바일어플개발/Flutter 실전어플 개발(15)
-
[009] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(로직구성1 - 장바구니에 제품 담기)
안녕하세요~ totally 개발자입니다. 저번 포스팅까지는 UI구성에 대해 살펴보았고, 이번 포스팅에서는 본격적인 로직 구성을 들어가보도록 하겠습니다. Step 1: 먼저 pubspec.yaml 파일을 열어 shared_preferences 패키지를 입력하고 flutter pub get 해줍니다. 장바구니는 별도의 서버 데이터베이스가 아닌 shared_preferences 패키지를 통해 간단하게 디스크에 저장하고 불러올 것입니다. 이전에 shared_preferences를 설명한 포스팅이 있으니 자세한 내용은 아래를 통해 확인해주시면 됩니다. https://totally-developer.tistory.com/54 [023] 플러터 (Flutter) 배우기 - Shared Preferences (디스크에..
2023.11.26 -
[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에..
2023.11.18 -
[007] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성7 - 제품 주문완료 페이지 만들기)
안녕하세요~ totally 개발자입니다. 저번 포스팅까지는 결제 시작 페이지 UI 구성을 해보았습니다. 이번 포스팅에서는 제품 주문완료 페이지를 만들어봅니다. Step 1: item_order_result_page.dart 파일을 생성해서 item_checkout_page.dart에 있는 파일을 모두 복사해서 가져옵니다. 그리고 클래스명을 ItemOrderResultPage로 변경하신 뒤에 8번째부터 14번째까지 parameter 값으로 가져오기 위해 동일하게 추가해줍니다. Step 2: 주문번호를 현재 시각에 맞춰서 생성하는 메소드를 만들어줍니다. 이 주문번호에 관해서는 각 쇼핑몰에서 다른 규칙을 적용하고 있습니다. 저는 연월일-시분초 형식에서 초를 millisecond로 해주었습니다. Step 3: ..
2023.11.11 -
[006] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성6 - 제품 결제시작 페이지 만들기 3)
안녕하세요~ totally 개발자입니다. 이 포스팅에서는 지난 시간에 이어 결제수단 옵션을 선택하고 간단한 양식 검증(비어 있는지 비밀번호가 일치하는 지 정도만 체크)해서 주문완료 페이지로 이동할 수 있도록 진행합니다. 지난 포스팅까지 진행하신 분들이라면 이 포스팅에서는 변경되는 부분이 많기에 잘 확인하시면서 따라오셔야 합니다. Step 1: item_checkout_page.dart에 아래 변수들을 선언해줍니다. 있는 경우에는 넘어가시면 됩니다. Step 2: 지난 포스팅을 하신 분들이라면 여기에서 잘 변경을 해주셔야 하는데 기존에 입력하는 TextFormField를 우편번호 부분을 제외하고 하나로 통합하기 위해 inputTextField 위젯을 별도로 만들어주고 다음처럼 설정을 해줍니다. 파라미터들을..
2023.11.04 -
[005] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성5 - 제품 결제시작 페이지 만들기 2)
안녕하세요~ totally 개발자입니다. 저번 포스팅에 이어 결제시작 페이지를 작업해보겠습니다. 먼저 우편번호 부분을 API를 통해 구현할 것입니다. Step 1: pubspec.yaml에 kpostal 패키지를 추가하고 터미널에 flutter pub get 입력해줍니다. kpostal 패키지 참고 https://pub.dev/packages/kpostal kpostal | Flutter Package Kpostal package can search for Korean postal addresses using Kakao postcode service. This package is inspired by Kopo package that is discontinued. pub.dev Step 2: 안드로이드와..
2023.10.14 -
[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