[001] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성1 - 제품 리스트 페이지 만들기)

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

 

그 동안의 플러터 기본기를 통하여 간단하면서도 중요한 기능들은 포함한 (PG 기능은 실제로 구현하지는 않지만 필요한 입력값들은 다 받고 주문완료까지 표시해줄 수 있도록 만들 계획입니다.

 

구성은 아래와 같습니다.

UI 구성(제품 리스트, 제품 상세, 장바구니, 결제시작, 구매완료, 구매내역 확인, 구매 취소 등등)

백엔드 연동 (제품, 주문내역 등 데이터베이스 테이블로 저장 및 불러옴)

 

Step 1: 플러터 쇼핑몰 앱 제작에 필요한 프로젝트는 이미 준비되어 있다고 가정하고 시작합니다. 실제 업무에서는 디자인 팀에서 제공해주는 Figma, XD 등 디자인 툴을 이용하여 UI를 보고 따라하지만 여기에서는 그런 과정을 모두 생략하고 MVP 형식의 제일 간단한 UI로 진행하기 때문에 디자인은 거의 다루지 않을 계획이지만 기본적으로 material design 3를 적용합니다. UI구성 부분에서는 백엔드 부분을 다루지 않고 UI를 마무리한 후 DB 등 백엔드 작업을 진행할 예정입니다. 물론 mock data를 위해 기본 모델 등은 객체로 만들고 시작합니다.

이 포스팅에서는 item list page(제품 리스트)만 진행합니다. 진행을 위해 사용한 패키지들입니다. cached_network_image, intl를 설치해주시고 터미널에서 flutter pub get해주시기 바랍니다.

 

 

Step 2: lib 폴더 하위에 item_list_page.dart 파일을 생성하고 models 폴더를 생성하신 후 product.dart를 생성합니다.

 

 

Step 3: 초기에 아래 내용을 따라 product.dart에 작성합니다. 추후 DB연동을 위해 변동될 수 있습니다.

 

 

Step 4: main.dart 파일을 아래처럼 작성해줍니다. (item_list_page를 제대로 작성하지 않았기 때문에 오류로 표시되지만 Step 5로 일단 넘어가서 진행합니다.)

 

 

Step 5: 아래처럼 item_list_page.dart를 작성합니다. 14번째 줄에 보시면 numberFormat를 사용하는데 100000원을 1,000,000원으로 출력하기 위함입니다. 그래서 intl 패키지를 사용하였습니다.

 

 

 

Step 6: 간단한 구현에 필요한 Mock Data를 위해 배열을 생성해줍니다. (맨 아래에 item_list_page.dart 코드 첨부하였으니 거기에서 복사하실 수 있습니다.) 이미지는 picsum의 이미지 링크를 사용합니다.

 

 

 

Step 7: productContainer 위젯을 만들어줍니다. 여기에서 productName, productImageUrl, price를 매개변수로 받아 각각의 위젯에 전달해줍니다. 이미지는 CachedNetworkImage 위젯을 사용하는데 기본 Image.network 위젯을 사용해도 되지만 중복되는 이미지라면 이미 캐싱된 것을 가져오기 때문에 성능적으로 도움이 됩니다. placeholder를 사용하여 이미지 로딩중을 표시해주고 errorWidget을 통해 오류 발생을 출력할 수 있도록 해줍니다. 

 

 

 

Step 8: 마지막으로 GridView.builder 부분을 넣어 완성해줍니다. gridView는 gridDelegate와 itemBuilder를 반드시 넣어주어야 하는데 gridDelegate에 각각 childAspectRatio를 넣어 높이 비율을 조절하시고 crossAxisCount를 통해 각각 몇 열이 들어가는지 지정해줄 수 있습니다. 

 

 

[실행 결과]

 

 

 

[item_list_page.dart 소스 코드]

 

[유튜브 강좌 영상]

 

https://youtu.be/3lWgjH8cqF8?si=O7r7Kdoi7tEjdEHu 

 

 

다음에 이어 제품 상세 페이지를 진행해보도록 하겠습니다. 감사합니다.