[flutter] ios-app 클론코딩하기2편 iphone-timer 구현하기

안녕하세요? ios 클론코딩 2편 이번 글은 아이폰앱 중에서 타이머를 플러터로 구현합니다. 

 

 

디자인

 

필요한 기능

1.시간을 설정한다. 
2.시작버튼을 누르면 시간이 거꾸로 흐른다. 
3.일시정지 버튼을 누르면 시간이 멈춘다. 
4.재개버튼을 누르면 멈춰있던 시간에서 다시 거꾸로 흐른다. 
5.취소 버튼을 누르면 리셋된다. 

 

구현한 코드

AnimateController를 사용해서 변화하는 시간을 잡았습니다. 

 

1.시작버튼을 눌러서 설정하고 시간이 거꾸로 흐르는 코드입니다.

late AnimationController controller;
bool isPlaying = false; //타이머 상태가 시작되었는지 체크
bool isPaused = false; //타이머 상태가 일시정지인지 체크

controller.reverse(
      from: controller.value == 0
          ? progress
          : controller.value);
  setState(() {
    isPaused = false;
    isPlaying = true;
  });

 

2.일시정지 버튼을 눌러서 타이머를 멈춥니다. 

if (controller.isAnimating) {
  controller.stop();
  setState(() {
    isPaused = true;
    isPlaying=false;
  });

 

3.재개버튼을 누르면 멈춰있던 시간에서 다시 거꾸로 흐릅니다. 시작버튼과 동일하므로 생략합니다. 

 

4.취소버튼을 누르면 타이머를 리셋합니다. 

controller.reset();
  setState(() {
  isPlaying = false;
});

 

완성된 화면

 

 

 

완성된 전체 코드는 깃허브 링크로 남겨두겠습니다. 🫶 

GitHub - kimiszero/iPhone_app_clonecoding: 아이폰에 있는 앱들 한번 따라 만들어보기👀