Flutter | Android | 몸무게 기록 앱 - 구현 1 - Dashboard Page

Newton Project로 Flutter를 이용해 몸무게 기록 안드로이드 앱을 구축하고 있다. 해당 글은 Dashboard Page 구현에 대한 글이다.

구현 1 - Dashboard Page

Newton Project - 몸무게 기록 앱 - 구현 Dashboard Page

Project Initial Setting

구현 과정에서 가장 먼저 프로젝트를 생성하고 main.dart에서 한 페이지이지만 route 설정을 해주었다. 그런 다음 지난 기획편에서 AI를 활용해 만든 UI를 기반으로 앱 개발을 시작하였다.

Flutter | Android | 몸무게 기록 앱 - 기획

대시보드 페이지

몸무게 기록앱의 메인 페이지가 될 Dashboard 페이지를 먼저 구현하였다. UI를 미리 기획하긴 하였지만, 대략적인 계획이었기 때문에 디자인을 조금씩 다듬어 가면서 진행해야 했다. 이 과정에서 light모드와 dark모드에 대응하기 위해 ThemeData를 적용해 보았다. Flutter를 사용한지 이제 1년이 거의 다 되어 가지만, ThemeData를 제대로 사용해본 적이 없어서 공부를 좀 하느라 한 페이지를 만드는데 예상보다 긴 시간이 소요됐다.

Flutter | 알아두면 정말 편한 ThemeData를 이용한 색관리

그렇게 해서 만든 첫번째 페이지인 "Dashboard Page"는 다음과 같다.

Newton Project - 몸무게 기록 앱 - Dashboard page light and dark mode

어려웠던 점

• ThemeData

이번 페이지 구현에서 가장 큰 난관(?), 시간이 많이 걸렸던 작업은 ThemeData에 대해서 알아보는 것이었다. 그냥 알아보고 빠르게 적용만 했다면 이정도까진 아니었겠지만, 다음에도 찾아볼 마음에 글까지 쓰느라 시간이 좀 걸렸다.

• 색상 팔레트 구성

Light 모드와 Dark 모드에서 어느정도 보기 좋은 색상들을 고르는게 생각보다 쉽지 않았다. 이런 색상들을 추천해 주는 서비스도 있을 테지만, ThemeData가 어떻게 작동하는지 확인하는데 집중하느라 색상을 ColorPicker에서 수작업으로 뽑아내었다. 다음번에 추가적인 색상을 뽑아야 한다면 Color 추천 서비스를 이용해 보아야 겠다.

다음 과제

다음번에는 Statistics page를 구현해 보려고 한다. 일단 서버 연동 없이 UI를 구축하는데 집중할 것이다.