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

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

 

이전 강좌에 이어 이번 포스팅에서는 제품 리스트에서 각 제품을 클릭했을 때 각 제품의 상세 페이지로 이동해줄 수 있도록 상세 페이지를 만들어보도록 하겠습니다.

 

Step 1: constants.dart 파일을 먼저 생성해줍니다.

 

 

Step 2: 저번 시간에 item_list_page.dart에서 만들었던 NumberFormat 부분이 계속 사용되고 중복되는 관계로 이 변수를 constants.dart 파일 여기로 분리해줍니다.

아래 부분을 없애주시고,

아래 constants.dart 파일에 다음처럼 복사해주신 뒤,

그 후에 오류로 표시되어 있는 numberFormat에 필요한 이 부분을 임포트하여 줍니다.

 

item_list_page.dart에서 constants를 임포트하여 완료한 모습입니다.

 

Step 3: item_list_page.dart에 있었던 내용들을 일단 다 가지고 오신 뒤, 다음처럼 ItemDetailsPage로 변경해주시고 불필요한 내용을 제거하신 뒤에 작업을 시작합니다.

 

 

Step 4: 아래처럼 매개변수들을 전달해서 받을 수 있도록 만들어줍니다.

 

 

Step 5: item_list_page.dart 파일로 가셔서 Container 부분에 마우스를 왼쪽 클릭하시고 VSCode 기준으로 윈도우는 Ctrl과 . 키를 누르시고 맥은 Command와 .키를 누르셔서 Wrap with widget...를 선택해줍니다.

 

 

아래 widget를 GestureDetector로 변경해줍니다. GestureDetector은 제스쳐를 인식할 수 있도록 해주는 위젯입니다.

 

75번째 줄처럼 onTap: 속성을 넣어주시고 다음 페이지로 이동해줄 수 있도록 추가해줍니다. 다만 아직 productNo은 위의 productContainer 매개변수로 받아 오지 않기 때문에 아직 에러로 표시가 됩니다.

61번째 줄에 매개변수로 전달해주시고 73번째에서 매개변수를 전달 받고, 82번째에 productNo를 그 상세 페이지로 전달하는 것까지 모두 완료해주시면 됩니다.

 

Step 5: item_details_page.dart로 넘어가서 아래처럼 이미지를 먼저 표시해줍니다. 37번째에 MediaQuery를 사용하여 길이를 반응형으로 조절할 수 있습니다. 0.8를 곱함으로서, 80%의 길이를 표시해주기 위함입니다. 

 

 

Step 6: 이미지 아래에 제품 제목과 가격을 표시해줍니다.

 

 

Step 7: 그 후 bottomNavigationBar를 활용하여 버튼을 맨 아래에 장바구니 담기 버튼으로 만들어줍니다.

 

 

아직은 장바구니 페이지를 만들지 않았기 때문에 onPressed: () {} 부분은 공백으로 두고 다음 포스팅에서는 장바구니 페이지 UI 구성에 대해 살펴보도록 하겠습니다. 감사합니다.

 

[전체 소스 코드]

 

[item_list_page.dart]

 

 

[item_details_page.dart]

 

 

[유튜브 강좌 영상]

 

https://youtu.be/5Wso03FQwYE