WalkingHealth
개발 툴 : Flutter
개발 언어 : Dart
개발 일시 : 2023-02-23 ~ 2023-03-01(개강 : 2023-03-02)
개발자 : Won Chi Hyeon
기능 : Sensor_plus 패키지를 활용한 만보기(스텝 트래커) 기능
자주 사용되는 UI를 학습하기 위한 프로젝트
1월부터 지금까지 학습한 플러터 지식으로 앱을 따라만들면서 내가 부족한 점이 무엇인지를 아는 데
중점을 두고 프로젝트를 진행하였습니다.
앱 바의 색상과 텍스트, 아이콘을 넣는 작업을 하였습니다.
아이콘을 넣을 때 왼쪽으로 넣으려면 leading, 오른쪽으로 넣으려면 action 프로퍼티에 넣어야 한다는 것을 배웠습니다.
또한 앱 바의 다양한 속성값 elevation(양각), toolbarHeight 등을 사용해서 최대한 클론코딩하고자 하는 앱과 비슷하게 설정하였습니다.
AppBar 안에 TabBar를 사용해서 앱 바 바로 밑에 탭 바를 생성하였습니다.
앱 바와 탭 바의 색상을 구분하기 위해 PreferredSize와 Material을 이용하였습니다.
랜덤 주사위 앱 프로젝트에서 진행한 BottomNavigationBar의 구현법과 크게 다르지 않아 컨트롤러를 등록하고 삭제하는 부분을
복습할 수 있었고 탭 바 역시 Color 프로퍼티의 조작을 통해서 다양한 기능을 구현하였습니다.
탭이 4개니까 controller의 length 프로퍼티의 값을 4로 수정한 후에 body에 TabBarView로
Widget 4개를 생성하였습니다. 각 탭은 메인, 쇼핑, 쿠폰, 설정 화면으로 이루어져 있으며
탭바 앱의 텍스트가 화면마다 달라지도록 수정하였습니다.
MainScreen을 Top, Middle, Bottom 위젯으로 크게 나누고 Top에 둥근 이미지, 텍스트, 아이콘들을 넣어주었습니다.
둥근이미지는 CircleAvatar로 구현하였습니다. ListTile로 구현할 수도 있었지만 Container 안에 위젯들을 넣어서 UI만 구현했습니다.
Middle에는 사진과 걸음 수, 갤러리, 사진 촬영 기능 아이콘과 측정 시간, 거리, 칼로리 소모량 텍스트가 있습니다.
이중 UI는 구현하되 기능은 추후에 추가하였습니다.
위젯을 봤을 때 Stack을 사용해서 위젯들을 이미지 위젯 위로 쌓아야 할 필요성이 있었습니다.
따라서 Stack을 사용해서 스택 : (선입후출 FILO) 제일 아래에 이미지 위젯을 넣어주었습니다.
상단 오른쪽에 3개의 아이콘 버튼 위젯이 위치하도록 하였습니다. 사진 촬영, 갤러리 등 기능은 추후에 구현하기로 하고
UI를 구현하였습니다.
가운데에는 Opacity가 적용된 둥근 Container안에 만보기 횟수 카운트 텍스트를 배치하였습니다.
Position와 Align 위젯으로 위젯들의 위치를 적절하게 위치시키는 데 노력을 기울였습니다.
맨 아래에는 가운데 구현한 Opacity Container와 텍스트를 복사해서 3개를 가로로 배치하고
padding값을 주어 간격을 두고 배치하였습니다.
Bottom은 리스트 형태로 탭을 하면 다른 페이지로 이동하는 형태로 InkWell을 사용하여 Tap했을 때 애니메이션을 주고
라우팅 기능은 나중에 구현, Container안에 텍스트와 아이콘을 적절하게 배치하여 완성하였습니다.
쇼핑 스크린 화면 역시 프로필Top, 중간에 Slider와 베스트상, 하단에 리스트형태의 컨테이너를 각각 클래스로 분리하여
구현하겠습니다.
Top은 프로필 사진, 화면, 캐시등을 보여주는 UI로 MainScreen의 Top 클래스를 복사하여 붙여넣었습니다.(코드의 재활용)
Middle은 이미지가 3개 들어가 있는 Carousel Slider와 베스트 상품을 나열하는 Container로 이루어져있습니다.
그 중에 Carousel Slider를 자동으로 넘어가도록 구현하고 페이지의 index를 보여주는 indicator를 추가하였습니다.
베스트 상품 위젯은 Container안에 여러 위젯들이 Stack으로 이루어져있고
InkWell로 탭을 했을 때 상품 구매 페이지, 더보기 페이지로 이동하도록 이벤트를 넣어주었습니다.
Bottom 위젯에는 Container가 리스트식으로 배열되어 있습니다.
MainScreen의 InkWell을 재활용하여 height만 변경하고 사용하였습니다.
CouponScreen의 Top 부분은 ShoppingScreen Coursel Slider의 scrollDirection을 Axis.vertical 수직으로 이동하도록 수정한 후에
재활용하고 안에 당첨된 상품과 당첨된 사람의 이름을 받아와서 출력합니다.
미사용 쿠폰들을 보여주는 위젯으로 ListView.separated를 사용해서 Divider로 구분하고
각 품목의 이름과 사용기한을 각각 List<String>에 저장하고 ListView Builder의 index를 사용해서
build 해주었습니다. 향후에 통신쪽에서 받은 데이터를 Future타입으로 선언한 후에 FutureBuilder의 형태로
수정하면 API에 따른 쿠폰들을 보여줄 수 있을 것으로 예상합니다.
사용완료 및 유효기간 만료 쿠폰 위젯 역시 미사용 쿠폰과 마찬가지로 ListView.separated를 사용하되
List<String>의 변수이름을 미사용 쿠폰과 다르게 하여 이를 구분, 역시 데이터 통신을 해오면 Future 타입으로
받아서 수정할 예정입니다.
SettingScreen(설정)페이지는 버전 정보, 내정보, 잠금화면 관리, 알림, 앱정보의 리스트들로 구성되어 있습니다.
Top 위젯에 버전 정보 Container를 구현하였습니다.
Middle의 내정보를 Container로 구현하였습니다. 마지막에 Switch 클래스를 사용해서 스위치를 구현하였습니다.
스위치의 onChanged로 스위치의 bool 값을 변화시킬 수도 있어야 하지만 그 주위의 InkWell을 클릭해도
스위치가 작동하도록 하기 위해서 onTap 옵션의 setState에 Boolean 반대값을 주는 알고리즘을 사용하여
InkWell을 눌렀을 때도 스위치가 작동하도록 하였습니다.
잠금화면관리 위젯 역시 내 정보 위젯과 비슷하지만 여러 스위치를 구현하는 작업 도중에
value 값이 모두 isCert로 같아서 이중인중 스위치를 건들였을 때 다른 스위치들이 같이 작동하는 문제가 발생,
이를 해결하기 위해서 value값을 잠금화면사용하기(isLock), 효과음(isSound), 진동(isVib), 뉴스컨텐츠보기(isNews)로 따로
분리해서 선언하여 스위치들이 따로 작동하고 return값을 내도록 설정하였습니다.
SettingScreen의 알림, 앱정보 Container도 위의 내정보 코드를 재활용하여 쉽게 구현하였습니다.
