생애 첫 앱 개발 기록 - Pomodoro 앱 개발 (2)

https://selfdevelopcampus.tistory.com/entry/%EC%83%9D%EC%95%A0-%EC%B2%AB-%EC%95%B1-%EA%B0%9C%EB%B0%9C-%EA%B8%B0%EB%A1%9D-Pomodoro-%EC%95%B1-%EA%B0%9C%EB%B0%9C-1

생애 첫 앱 개발 기록 - Pomodoro 앱 개발 (1)

저번에 만들었던 홈화면에 이어 설정화면을 개발을 진행하였다.

 

가장 기본적으로 넣어야 할 기능은 다음과 같았다.

- 집중 시간 설정

- 휴식 시간 설정

- 미리 알림 시간 설정

- 자동 시작 설정

- 화면 켜진 상태 유지 설정

 

추가 패키지 : GetX, wakelock 

 

- 집중 시간 설정, 휴식 시간 설정, 미리 알림 시간 설정 

 

이 세 개의 구조가 전부 비슷해서 하나의 파일로 묶어버렸다. 

여기 보면 처음에 Get.find() 라는 친구가 등장한다.

 

설정화면과 홈화면이 구분되어있지만 서로 집중시간, 휴식시간과 같은 데이터는 같이 움직여야하기 때문에 state management를 도입해야했다.

 

flutter의 state management에는 Provide, Bloc 등이 있었지만 나는 GetX를 택했다.

이유는 그냥 각각의 공식문서를 읽어봤을 때 제일 사용하기 쉬워보였기 때문이다.

GetXController로 필요한 전역변수들을 불러왔다.

(각자 타입으로 선언해야되나 고민되긴 했지만 좀 지저분해질 것 같아 그냥 var로 다 선언했다.)

 

슬라이더로 시간을 조절하면 onChange를 통해  GetXController에 해당하는 시간들이 변하게 된다.

 

 

- 자동 시작 설정

설정을 on/off 할 수 있는 Switch 위젯을 활용하였다. 

 

사실 위에서도 그렇고 onChanged를 할 때 

 

value -> controller에 저장 -> controller에서 값 불러와서 다시 value에 할당

 

의 방식으로 하면 변수 2개로 해결할 수 있지 않을까 했는데 state 값이 안 바뀌어서

일단 Setting화면에서만 조절할 수 있는 매개변수를 두어 3개의 변수를 컨트롤하는 방식으로 구현했다.

여기서 autoStart 값에 따른 홈화면 코드이다. 

 

autoStart가 켜져있으면 timer가 cancel됨가 동시에 바로 startTimer를 하여 timer가 끊기지 않도록 했고

autoStart가 꺼져있으면 아예 타이머를 멈추고 다시 시작 버튼을 눌러야 타이머가 작동될 수 있도록 구현했다.

 

 

 

- 화면 켜진 상태 유지 설정

 

https://pub.dev/packages/wakelock 

wakelock | Flutter Package

Wakelock 패키지를 활용하여 on/off 기능을 적용시켰다. 

 

이게 on 되어있으면 일정시간 후 자동으로 잠기는 기능을 막아준다.

사실 아직 실기기 테스트를 못해봐서 이 기능을 추후에 다시 확인해봐야할 듯

 

그렇게 해서 업데이트된 결과물은 위와 같다.

시간을 바뀌고 다시 돌아가면 적용되는 것을 확인할 수 있다.

 

일단 디자인은 매우 구리지만 추후에 손 보기로 하자.

 

---

추가해야될 기능

- 뽀 횟수 기록하여 저장

- 저장된 기록을 통해 통계 화면 만들기

 

setState를 하는 방식이 React의 useState와 매우 유사해서 오히려 재밌었다. 다만 리액트처럼 리턴값으로 새롭게 state를 만들기보다는 직접적으로 변수값을 변경하는 방식이라 좀 낯설긴 하다. 근데 하다보니 오히려 리액트처럼 set머시기 하는 것보다 플러터의 state 변경이 많은 사람들이 이해하기에는 훨씬 쉬운 방식일 것 같긴 하다.