Skip to content

dillo-lab/Flutter_Baemin

Repository files navigation

baeminclone

개발 툴 : Flutter
개발 언어 : Dart
개발 일시 : 2023-03-04 - ~ 
개발자 : Won Chi Hyeon

클론 코딩할 앱 "배달의 민족"

image

UI 화면 분리하기

배달의 민족앱은 스크롤 기능이 있고 많은 양의 위젯들을 보여주는 홈스크린앱으로 이루어져 있씁니다.
따라서 홈스크린의 UI를 크게 보여주고자 하는 기능에 따라서
Top, latest, sale, live, present, whole, other, bottom 총 8개로 분리한 후에 합치는 쪽으로 설계하였습니다.

image image

HomeScreen AppBar

주소설정 페이지를 title을 사용하여 배치,
아이콘 3개를 action을 사용하여 배치하였습니다.

image

Top SearchBar

Top의 SearchBar를 TextformField를 사용하여 구현하였습니다.

image

Top Card

카드 위젯을 사용해서 카드 안에 아이콘이나 글자를 넣어서 구현하였습니다.

image

Top Carousel Slider

Carousel Slider를 사용하여 슬라이더를 구현하였습니다.
모두 11개의 이미지와 index를 사용해서 구현하였습니다.

image

Top 위젯 완성

슬라이더 밑에 카드 위젯 4개를 margin : zero를 주고 구현하고 Top 위젯을 완성하였습니다.

image

Latest 위젯 구현

Latest 최근에 주문한 음식점을 보여주는 카드형식의 위젯과 광고 슬라이더를 구현하였습니다.

image

Sales 위젯 구현

Sales 위젯 역시 Latest 위젯과 마찬가지로 카드형식의 위젯으로 구현하였습니다.

image

Live 위젯 구현

Live 위젯 역시 Sales 위젯과 마찬가지로 카드형식의 위젯으로 구현하였습니다.

image

Present 위젯 구현

Prsent 위젯 역시 Live 위젯과 마찬가지로 카드형식의 위젯으로 구현하였습니다.

image

Whole 위젯 구현

Whole 위젯 역시 Prsent 위젯과 마찬가지로 카드형식의 위젯으로 구현하였습니다.

image

Other 위젯 구현

Other 위젯 역시 Whole 위젯과 마찬가지로 카드형식의 위젯으로 구현하였습니다.

image

Bottom 위젯 구현

Bottom 위젯은 컨테이너 배너와 텍스트들로 구현하였습니다.

Bottom 위젯을 끝으로 배달의민족 앱의 홈스크린 위젯들을 모두 구현하였습니다.

image

홈 스크린 최종 구현 화면

image image image image image image