[015] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(로직구성7 - 주문 데이터 파이어스토어에서 가져오기 - 완결)

2024. 3. 10. 18:35모바일어플개발/Flutter 실전어플 개발

반응형

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

 

저번 시간에는 주문 데이터를 파이어베이스 파이어스토어에 삽입하였고 이번 포스팅에서는 주문 데이터 리스트를 조회하는 방법에 대해 살펴보도록 하겠습니다. 로그인을 구현한 강좌가 아니기 때문에 여기에서는 모든 주문한 데이터를 가져올 것입니다. 

 

Step 1: lib > models > order.dart 파일을 열어주시고 unitPrice와 totalPrice에 지정된 double.parse 부분을 제거해줍니다. (파이어스토어에 저장된 값이 이미 number 형태)

 

 

Step 2: lib > my_order_list_page.dart로 가셔서 기존에 만들어두었던 변수들을 제거하시고 orderListRef 변수를 선언해줍니다.

 

 

Step 3: 기존에 사용했던 로직을 그대로 활용하기 위해 StreamBuilder를 중첩해서 사용하였습니다. 아래 방법은 참고만 하시고 실무에서는 아래처럼 구현하는 것이 아니라 효율적인 로직으로 구현해야 합니다. 40번째 Stream에서는 orderListRef 변수의 데이터들을 가져옵니다. 그 후 46-52번째 줄을 통해 제품의 상세 정보를 가져옵니다. 54번째 줄의 Stream에 전달해주시고 58번째 줄에서 product 변수에 스트림에서 받아온 데이터를 할당한 후 orderContainer에 필요한 데이터들을 매개변수로 전달하시면 됩니다. 

 

 

Step 4: 테스트를 진행해봅니다. 아래 프로필 모양 아이콘을 눌러주시면 나의 주문 목록으로 넘어갈 수 있습니다.

 

 

 

이번 포스팅에서는 기존의 Stream 로직을 그대로 사용해서 구현했기 때문에 새로운 내용은 없었습니다. 쇼핑몰 앱 강좌는 여기에서 완결하고 나머지 구현되지 못한 부분들은 직접 실습을 진행해보시면 개발에 도움이 되실 것으로 판단합니다. 여기까지 진행하시느라 수고 많으셨습니다.

 

"해당 쇼핑몰 앱 강좌 내용 및 유튜브 강좌 영상들 모두 무단으로 배포 및 가공을 금합니다"

 

[my_order_list_page.dart]

 

 

[유튜브 강좌 영상] 

https://youtu.be/H3hIooTTY2Q

 

 

 

반응형