2024. 1. 13. 20:27ㆍ모바일어플개발/Flutter 실전어플 개발
안녕하세요~ totally 개발자입니다.
지금까지 장바구니와 결제시작 부분에서는 Shared Preferences에 저장된 데이터를 가지고 와서 앞서 선언된 productList에서 상세 데이터를 가지고 왔습니다. 이 시간에는 기존의 productList에서 가지고 오는 것이 아니라 파이어베이스 파이어스토어에 저장된 리스트에서 해당 제품을 찾아 상세 내용을 보여주도록 하겠습니다. 장바구니에 저장된 데이터들은 모두 그대로 Shared Preferences에 기존대로 저장합니다. 제품 상세 내용만 파이어스토어에서 가져옵니다. 기존의 많은 부분이 변경되므로 아래 단계별로 수정하시기 바랍니다. 전체 소스 코드는 맨 아래에 있으니 참고하시기 바라며 반드시 해당 로직대로 구성할 필요가 전혀 없고 실무에서는 좀 더 효율적인 방법과 패턴에 맞는 방법을 채택해서 작업을 진행하시기를 권장드립니다.
Step 1: 먼저 item_basket_page.dart로 가셔서 아래 부분들을 작성합니다. productList를 Stream 리스트 변수로 만들고 productNo을 key로 받는 keyList 변수도 만들어줍니다.
Step 2: initState 부분을 아래처럼 구성합니다. 32-38번째 라인을 통해 기존에 담긴 장바구니 데이터를 가져오고 만약 오류가 있어 가져올 수 없는 경우에는 아예 빈 객체로 할당하였습니다. 41-45번째 라인은 55번째에 whereIn: keyList로 데이터를 넘기게 되는데 기존의 cartMap 객체에 productNo를 int가 아니라 String 형태로 저장되어 있기 때문에 int로 변환해주는 작업이 필요합니다. 41-45번째처럼 하셔도 되고 다른 방식으로 int로 변경해서 사용하셔도 됩니다. 이렇게 해야 whereIn에 keyList를 넘길 때 제대로 작동됩니다. 48-56번째 라인이 중요한데, keyList에 데이터가 있는 경우 즉 장바구니에 담긴 데이터가 있는 경우에 파이어스토어에서 해당 productNo에 맞는 제품 상세 데이터를 가지고 옵니다. 마지막으로 58번째 라인에서 productNo를 오름차순으로 정렬하여 데이터를 가지고 오게 하는 스트림을 productList에 할당합니다.
Step 3: 기존 double calculateTotalPrice 함수는 사용하지 않을 것이므로 삭제해주시면 됩니다.
Step 4: body 부분을 아래처럼 작업해줍니다. cartMap(장바구니 데이터)이 비어 있는 경우 Container() 위젯을 반환하며, cartMap에 데이터가 있는 경우 StreamBuilder 위젯을 통해 데이터를 basketContainer를 활용해서 표시합니다. map 함수를 통해 파이어스토어에서 받아온 각 document를 basketContainer으로 나타냅니다. 76번째 라인에 cartMap에 해당 productNo를 key로 가진 데이터가 null이 아닌 경우를 조건으로 체크해주었습니다. null인 경우 87번째 라인처럼 Container() 위젯을 반환합니다. 90-98번째 줄에는 오류가 있는 경우, 로딩 중인 경우를 대비해서 로직을 구성합니다.
Step 5: bottomNavigationBar 부분인데 위와 중복되는 부분이 있어 사실 로직상으로는 분명히 개선해야 하는 코드이나 제가 UI편에서 bottmNavigationBar를 사용해서 버튼을 표현하였기 때문에 중복되지만 일단 해당 로직으로 구성하였습니다. 111-118번째 라인은 총 가격을 계산하는 로직으로 기존의 double calculateTotalPrice가 이 부분에 수정되어 들어갑니다.
Step 6: 수량을 줄이는 로직입니다.
Step 7: 수량을 늘리는 로직입니다.
Step 8: 장바구니에서 해당 제품을 제거하는 로직입니다.
Step 9: 장바구니는 완료되었고 결제시작에도 해당 로직을 그대로 적용하기 위해 item_checkout_page.dart로 가서 아래 부분을 추가합니다.
Step 10: initState를 아래처럼 작성합니다.
Step 11: body에서 Column내에 아래처럼 작업해줍니다.
Step 12: bottomNavigationBar 부분입니다. 장바구니 페이지와 동일합니다.
Step 13: 결과 모습입니다.
 |
 |
[전체 소스 코드]
[item_basket_page.dart]
[item_checkout_page.dart]
[유튜브 강좌 영상]