[Flutter] 1. 타이머부터 말썽이에용!

제일 먼저 틀부터 잡아주었다. 공부 할때 잘못된 습관이었던 main.dart에다가 모든 파일 다 박아 넣지 않기.. (중요)그래서 일단 indexPage라는 폴더 하나를 만들어서 총 3개의 page view controller를 사용하여 개발 해보기로 했다.

테마 색상을 저렇게 잡은 이유는 포모도로와 휴식 타이머의 색상 반전을 위해 딱 2컬러만 앱에다가 쓰자 이런 마인드 였다. 그래서 찾은 사이트가 요기다

https://2colors.colorion.co/

조금 붉으스름한 흰색이 맘에 안들긴 한다만 이 남색이 내 취저이다보니.. 이걸로 그냥 선탞ㄲㄲ

자 이제 본 작업에 들어가보자~ 해서 pub.dev들어가서 다양한 자료들도 찾아보고 했는데, 제일 중요한 시계를 어떻게 구현해야 할지 모르겠더라..

모를땐 패키지를 쓰라던 자칭 플러터 고수 xx씨의 말을 듣고 패키지를 찾아봤다.

pub.dev

아니 검색을 해봤는데 무슨.. 음.. 어.. 플러터 기본 패키지 3장이 나왔다. 그래서 가볍게 무시해주고, 그 뒤에 스탑 와치 타이머라는 패키지가 있길래 보지도 않고 바로 담았다.

pub.dev

크~ readme에서 부터 gif로 어캐 돌아가는지 제공 해주는 걸 보아하니 딱 이놈이 제격이였다. 심지어 카운트 다운까지 제공을 해 주었기 때문에 그냥 이거 그대로 사용하면 문제 없이 개발 가능이겠다 싶어 바로 import.. 

sample

example 코드를 그대로 긁어오니 샘플과 아주 유사한 화면이 내게도 나타났다. 하지만 내가 만드려는 포모도로 기법을 사용한 타이머.. 그냥 분과 초만 있으면 된다. 근데 이 패키지는 따로 시간과 초를 백으로 나눈 저게 따로 절사되지 않는 것 같았다. 뭐 어쩌겠나.. 다른 개발 방법을 찾기로 했다.

바로 우리 구글 대장님께 물어보니 1번부터 멋있게 심지어 한국어로 된 자료를 나에게 선사해주셨다. 그럼 내가 어떻게 하겠나? 그대로 들어가서 코드를 스캔했다. 딱 나에게 맞진 않지만 조금 응용하면 쓸 수 있을 것 같았다.

https://icodebroker.tistory.com/10093

음 근데 딱 초만 구현해놓으셨고, 버튼 위치 같은 것들은 내가 좀 수정 해야 할 것 같았다. 그리고 1년도 안된 문서인데 raised button 같은 레거시 코드들이 있는 것을 보아하니 복사해서도 내가 조금 손을 봐줘야 했다. (애초에 raised button 비스무리한것도 넣지 않음 ㅋ)

코드를 참고하고 작성 해보니 문제가 몇 가지 있었다. 일단 첫 번째, 시간이 뭐 잘 출력은 되는데 어.. 일단 시간이 내 맘대로 출력 되지 않는 문제가 있었다..

아니 내가 100초 남은건 알겠는데... 1분 40초 이렇게 나와야지... 그냥 지 맘대로 출력되기 왕이였다. 시간을 빠르게 흐르게, 느리게 흐르게 다 가능했는데 시간 절사를 어떻게 해야할지 모르겠어서 그냥 c언어랑 비슷한 dart니깐 그냥 무지성으로 갖다 박으면 되지 않을까 하고 코드를 써봤다.

int minuteCount = countTime ~/ 6000;
int secondCount = countTime ~/ 100;
while(secondCount >= 60)
    secondCount -= 60;

근데 놀랍게도 핫 리로드가 정확하게 먹혔다. 그리고 실행이 잘됨;; (물론 약 40분의 시행착오 뒤에 얻어낸 결과) 이건 당연히 안되겠지 싶었던게 되어버리니 살짝 뒤통수 맞은 느낌이랄까 그랬다..

놀랍게도 잘 실행 되는 모습이다. 물론 다른 좋은 방법이 있을 거같은데.. 일단 이렇게 사용하기로 했다. 이제 포모도로 타이머와 휴식 타이머의 테마 색상을 확 반전시키는 함수까지 만들어주고 나니 조금 포모도로 타이머 다워졌달까? 이대로 출판해도 문제없을듯 라고할뻔 ㅋㅋ;

반전이 딱 되어버리고~ 그리고 그 뒤에 바로 휴대폰 알람이 오는 이 구조 괜찮지 않나? 이제 대충 무슨 작업을 하고 있었는지 분류하는 창을 여기다가 만들고, UI 조금만 다듬어주면 될 것 같다. 

 

지금까지 사용한 패키지들