나만의 건강 매니저, Health Tracker를 소개합니다.
Health Tracker는 바쁜 일상 속에서 운동과 건강을 기록할 수 있도록 도와줍니다.
하루하루 쌓이는 기록들을 모아, 발전하는 모습을 확인해보세요!
개발 환경
- Front-end : Flutter
- IDE : Visual Studio Code
앱을 실행했을 때 3초간 나타나는 splash 화면을 구현했습니다.
Splash 화면은 Lottie를 사용해서 구현했습니다.
Drawer를 구현해 클릭할 때마다 동기 부여가 되는 랜덤 문구를 보여주는 기능을 추가했습니다.
Drawer 안에는 Contact, Image, Health, Care 각 탭으로 이동할 수 있는 버튼을 추가했습니다.
하단에 달리는 사람 애니메이션을 Lottie를 사용해 구현했습니다.
같이 운동하는 사람들의 연락처를 저장하고 리스트로 볼 수 있는 화면입니다.
연락처를 JSON 형식으로 저장해두고 해당 파일을 불러와서 연락처 리스트를 구현했습니다.
연락처 리스트는 ListView를 사용해서 구현했습니다.
우측 하단의 + 모양 floatingActionButton을 눌러 이름과 전화번호를 입력해 연락처를 추가할 수 있는 기능을 구현했습니다.
sharedPreference를 사용해서 추가된 연락처를 기기에 저장해 어플을 재시작 해도 데이터가 유지되도록 만들었습니다.
연락처 상세 페이지에는 이름과 전화번호를 표시하고 전화 걸기 버튼을 추가했습니다.
전화 걸기 버튼을 누르면 실제 전화 어플로 전환되고 번호가 전달됩니다.
추가로 우측 상단의 버튼을 통해 연락처 수정과 삭제가 가능하도록 구현했습니다.
연락처 상세 페이지에서 수정하기 아이콘을 누르면 해당 연락처를 불러오고 수정할 수 있습니다.
수정한 데이터 또한 sharedPreference를 사용해 앱을 껐다가 켜도 데이터가 유지되도록 구현했습니다.
연락처 상세 페이지에서 삭제하기 아이콘을 누르면 연락처를 삭제할 수 있습니다.
오늘 먹은 식단과, 운동 기록들을 사진으로 정리할 수 있는 탭입니다.
GridView를 사용하여 등록된 사진들을 보여주는 갤러리를 구성했습니다.
사진을 탭하면 확대된 사진과 함께 사진에 대한 상세 정보를 확인할 수 있습니다.
SharedPreferences를 사용하여 갤러리에 등록된 사진과 코멘트가 기기 어플 데이터로 저장되어, 어플을 재실행 해도 등록한 사진, 코멘트가 유지되도록 했습니다.
우측 하단의 FloatingActionButton 을 통해 사진을 추가할 수 있습니다. (카메라 or 갤러리)
사진이 확대된 상태에서 우측 상단의 휴지통 버튼을 통해 사진을 삭제할 수 있습니다.
사진 페이지에서는 사용자 본인이 사진에 대해 남긴 코멘트를 확인하거나, 코멘트가 등록되지 않은 사진에 코멘트를 추가할 수 있습니다.
코멘트가 추가된 상태에서는 코멘트를 수정하거나 삭제할 수 있습니다.
갤러리에 필터링 기능을 추가해서 기간에 대한 필터링을 사용할 수 있도록 구현했습니다.
우측 상단 필터링 버튼을 누르게 되면, 오늘, 7일, 30일, 전체를 선택할 수 있고, 혹은 원하는 날짜로부터의 사진들을 모아서 확인할 수 있습니다.
하루 동안 했던 운동을 등록할 수 있는 탭입니다.
아직 운동을 하지 않았다면 운동 시작하기 버튼,
이미 운동을 진행했다면 운동 추가 버튼을 통해 운동을 추가할 수 있습니다.
운동의 종류와 운동 시간을 선택하여 등록하게 되면 추가된 운동이 반영됩니다.
추가된 운동은 SharedPreferences를 통해 저장되기 때문에 어플을 재시작해도 상태가 유지됩니다.
운동을 등록하게 되면 fl_chart의 pie chart에 반영되어 오늘 진행한 운동의 종류와 시간을 쉽게 확인할 수 있습니다.
우측 상단의 버튼을 통해 잘못 등록하거나 삭제가 필요한 운동을 수정할 수 있습니다.
세부 내용 버튼을 누르면 “오늘의 운동” 탭으로 이동하고, ListView 형식으로 오늘 했던 운동들을 확인할 수 있습니다.
또한, 각각의 운동 별로 소모된 칼로리 양과, 총 칼로리 소모가 표시됩니다.
히스토리 버튼을 누르면 “운동 히스토리” 탭으로 이동하고, ListView 형식으로 지금까지 등록한 운동 시간을 날짜 별로 확인할 수 있습니다.
탭 하단에는 최근에 연속으로 운동한 날짜 수와 최근 일주일 간의 총 운동 시간을 확인할 수 있습니다.
건강 카드, 건강 카드 상세 - 수정, 그래프
수면시간, 심박수, 칼로리, 혈당, 걸음수, 체중을 기록할 수 있는 탭입니다.
카드 형태로 구현하였으며, 각 카드를 누르면 해당 데이터의 상세 페이지를 확인할 수 있습니다.
다른 탭에서와 마찬가지로 sharedPreference를 사용해 어플을 종료해도 등록/수정한 데이터가 유지됩니다.
건강 카드의 상세 페이지에서는 오늘의 데이터를 입력할 수 있습니다.
또한 카드를 다시 눌러서 오늘의 데이터를 수정할 수 있습니다.
수정된 데이터는 카드와 추이 그래프에 반영됩니다.
하단에는 그래프를 넣어서 주간 건강 상태 추이를 확인할 수 있도록 구현했습니다.
그래프는 LineChart를 사용해 구현했습니다.
https://drive.google.com/file/d/1YwS5jKzK6HIbbU1hNXDt9I765QmRhd-l/view?usp=sharing