[flutter] iphone App 클론코딩하기1편 스톱워치StopWatch 구현

안녕하세요? 이번 글은 아이폰앱 중에서 stopwatch를 플러터로 구현해보려고 합니다. 

구현의 목적이 출시가 아닌 기능 구현이기 때문에 클론코딩을 선택했습니다. 🙏 

 

디자인

 

필요한 기능

1.시작 버튼을 터치하면 초수-분수가 증가한다. 

2.랩 버튼을 터치하면 선택된 시간이 기록된다. 

3.중단버튼을 터치하면 시간이 멈춘다. 

4.재설정버튼을 터치하면 초기화된다. 

 

구현한 코드

Timer, Stopwatch class를 사용해서 쉽게 구현할 수 있었습니다. 

먼저 타이머를 시작하는 코드입니다. 

  void _start() {
    _timer = Timer.periodic(Duration(milliseconds: 40), (t) {
      setState(() {
        _result =
        '${_stopWatch.elapsed.inMinutes.toString().padLeft(2, '0')}:${(_stopWatch.elapsed.inSeconds % 60).toString().padLeft(2, '0')}:${(_stopWatch.elapsed.inMilliseconds % 100).toString().padLeft(2, '0')}';
      });
    });
    _stopWatch.start();
  }

 

다음은 타이머를 일시중단하는 코드입니다. 

void _stop() {
    _timer.cancel();
    _stopWatch.stop();
  }

 

다음은 초기화하는 코드입니다. 

void _reset() {
    _stop();
    _stopWatch.reset();
  }

 

 

완성된 화면

 

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