baeminclone
개발 툴 : Flutter
개발 언어 : Dart
개발 일시 : 2023-03-04 - ~
개발자 : Won Chi Hyeon
클론 코딩할 앱 "배달의 민족"
UI 화면 분리하기
배달의 민족앱은 스크롤 기능이 있고 많은 양의 위젯들을 보여주는 홈스크린앱으로 이루어져 있씁니다.
따라서 홈스크린의 UI를 크게 보여주고자 하는 기능에 따라서
Top, latest, sale, live, present, whole, other, bottom 총 8개로 분리한 후에 합치는 쪽으로 설계하였습니다.
HomeScreen AppBar
주소설정 페이지를 title을 사용하여 배치,
아이콘 3개를 action을 사용하여 배치하였습니다.
Top SearchBar
Top의 SearchBar를 TextformField를 사용하여 구현하였습니다.
Top Card
카드 위젯을 사용해서 카드 안에 아이콘이나 글자를 넣어서 구현하였습니다.
Top Carousel Slider
Carousel Slider를 사용하여 슬라이더를 구현하였습니다.
모두 11개의 이미지와 index를 사용해서 구현하였습니다.
Top 위젯 완성
슬라이더 밑에 카드 위젯 4개를 margin : zero를 주고 구현하고 Top 위젯을 완성하였습니다.
Latest 위젯 구현
Latest 최근에 주문한 음식점을 보여주는 카드형식의 위젯과 광고 슬라이더를 구현하였습니다.
Sales 위젯 구현
Sales 위젯 역시 Latest 위젯과 마찬가지로 카드형식의 위젯으로 구현하였습니다.
Live 위젯 구현
Live 위젯 역시 Sales 위젯과 마찬가지로 카드형식의 위젯으로 구현하였습니다.
Present 위젯 구현
Prsent 위젯 역시 Live 위젯과 마찬가지로 카드형식의 위젯으로 구현하였습니다.
Whole 위젯 구현
Whole 위젯 역시 Prsent 위젯과 마찬가지로 카드형식의 위젯으로 구현하였습니다.
Other 위젯 구현
Other 위젯 역시 Whole 위젯과 마찬가지로 카드형식의 위젯으로 구현하였습니다.
Bottom 위젯 구현
Bottom 위젯은 컨테이너 배너와 텍스트들로 구현하였습니다.
Bottom 위젯을 끝으로 배달의민족 앱의 홈스크린 위젯들을 모두 구현하였습니다.