가계부 앱 Money Is Mine - 개발 진척 기록 ⑥

개발 진척 기록

업데이트 목록

• 그래프 보여주기
  • 카테고리 별 지출
  • 주간 지출/수입, 평균

그래프 보여주기

fl chart 패키지를 사용하였다.
테이블 캘린더를 써본 김에 다른 패키지도 빨리 써보고 싶어서 그래프를 먼저 만들게 되었다. 생각보다 오래 걸림…

카테고리 별 지출

PieChart를 사용해서 만들었다.

        SELECT category, SUM(money) FROM Specs
        WHERE type = 0 AND dateTime BETWEEN '${monthDate[0]}' AND '${monthDate[1]}'
        GROUP BY category;

달 별 지출을 GROUP BY category로 구해 왔다.

카테고리는 어떻게 보여줄까 했는데 다른 페이지랑도 통일해서 칩으로 달아줬다.
퍼센티지는 실제 그대로 하면 1%대 칸은 너무 작게 나와서 일정량 이상을 더해 줘서 공간을 차지할 수 있게 했다.
색깔 좀 그나마 이쁘게 고르는 게 오래 걸림

이후에 금액 등도 표시할 예정이다.

주간 지출/수입, 평균

BarChart를 사용해서 만들었다.
원 그래프보다는 좀 설정이 많아서 복잡했다.
월요일, 화요일 등등 요일의 평균을 구해서 Stack으로 겹쳐줘서 보여줬다.
아래의 슬라이더로 세로축을 변경할 수 있다. 그러나 예를 들어 해당 주의 최대값이 10만 원이라면, 세로축은 10만 원 이상이 되어야 한다.

누르면 금액이 나온다.

PageView를 써서 이전 주로 넘길 수 있다.

PageView 문제

모든 주차를 다 구해서 미리 만들어 놓기는 좀 그러니, 동적으로 페이지뷰를 넘길 때마다 페이지를 추가해야 했다. 뒤로 넘기면 이전 주차, 앞으로 넘기면 다음 주차

https://stackoverflow.com/questions/52579301/adding-new-pages-to-a-pageview-while-swiping
그런데 페이지뷰를 어떤 list로 만든다 치면 그 리스트의 0번째에 추가를 하고 setState를 하고 하니까, 즉 나는 지금 0번째에 있는데 리스트 0번째에 넣어서 다시 진짜 0번째에 가려면 1번째로 이동했다가 다시 0번째로 가야 하는… 그런 이상한 상황이 생긴다.

여러가지 참 많이 찾아 봤는데… 저 문제는 해결되지 않음
일단 이 앱은 가계부니까 다음 주차는 딱히 볼 필요가 없으니 이전 주차만 봐도 되니까 한 방향으로만 가도 된다.
그래서 list에는 맨 뒤에다가 추가하고, 페이지뷰 방향 자체를 거꾸로 하는 방법이 있나 질문을 올려서
https://stackoverflow.com/questions/70907900/how-to-set-the-orientation-of-the-pageview-to-the-left/70914549#70914549
받은 답변
그냥 reverse 쓰면 된다!! 세상에 난 왜 못찾았을까

그리고 기존의 PageView는 자식 크기에 wrap content로 만들 수가 없고 미리 크기를 정해 놔야 해서 불편하길래 ExpandablePageView 패키지를 사용했는데,
이걸 쓰니까 각 페이지를 넘길 때마다 rebuild 하는 걸 막아주는 AutomaticKeepAliveClientMixin을 페이지 위젯으로 쓰니까 위젯이 자꾸 사라졌다.
그냥 페이지뷰를 쓸 때는 위젯이 안 사라지고 잘 작동해서 그냥 페이지뷰로 다시 바꿨다…
아무튼 페이지뷰 때문에 시간 많이 잡아 먹음

동작 영상

요구사항 명세

• 지출/수입 내역 등록 ◎
  • + 고정 지출/수입 등록
  • + 자주 사용되는 입력 정리 ◎
  • + 메모, 사진, 장소 같이 입력 △
• 일간, 주간, 월간 내역 모아서 보기 ◎
  • + 그래프 보여주기 △
  • + 달력에 지출 보여주기 △
  • + 내역 검색
  • + 매일, 매주, 매월 평균 보여주기 △
  • + 예산에 따른 결과 보여주기

+ 표시는 additional한 부분들로 우선순위가 비교적 낮다.

고정 지출/수입 등록은 어떤 식으로 할지 생각 중…

개발 일정

내용	1월 3째주	1월 4째주	1월 5째주	2월 1째주	2월 2째주
Local DB 등 Flutter 공부	◎
지출/수입 내역 등록	◎	●
일간, 주간, 월간 내역 모아서 보기	△	△	◎
고정 지출/수입 등록			●
자주 사용되는 입력 정리		◎		●
메모, 사진, 장소 같이 입력		△
그래프 보여주기			△	●
달력에 지출 보여주기	△				●
내역 검색				●
매일, 매주, 매월 평균 보여주기			△		●
예산에 따른 결과 보여주기					●

---