[Flutter] Flutter로 Timer을 활용한 타이머 앱 만들기

앱 개발을 시작하려면 먼저 Flutter 개발 환경을 설정해야 합니다. Flutter를 아직 설치하지 않은 경우 Flutter 공식 웹사이트에서 설치 가이드를 참고하십시오.

1. Flutter 프로젝트 설정

Flutter 개발 환경을 설치하고, 다음과 같이 새로운 프로젝트를 생성합니다:

flutter create countdown_timer_app

프로젝트를 생성한 후, 코드 편집기 (예: Visual Studio Code)를 열고 countdown_timer_app 폴더를 엽니다.

2. UI 디자인

앱의 기본 UI 디자인을 설정합니다. 이 앱은 버튼과 남은 시간을 표시할 화면으로 구성됩니다. UI를 다음과 같이 설계합니다:

Scaffold(
  appBar: AppBar(
    title: Text('Countdown Timer'),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          '00:00', // 남은 시간 표시
          style: TextStyle(fontSize: 36),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            // 버튼 누를 때 타이머 시작
          },
          child: Text('타이머 시작'),
        ),
      ],
    ),
  ),
)

3. 타이머 로직 구현

버튼을 누를 때 타이머를 시작하도록 로직을 구현합니다. 이때 Timer.periodic을 사용하여 1초마다 시간을 감소시킵니다.

int secondsRemaining = 60; // 초기 타이머 값 (60초)
Timer timer;

void startTimer() {
  timer = Timer.periodic(Duration(seconds: 1), (Timer t) {
    setState(() {
      if (secondsRemaining == 0) {
        t.cancel(); // 타이머 중지
      } else {
        secondsRemaining--;
      }
    });
  });
}

4. 버튼과 타이머 연동

"타이머 시작" 버튼을 누를 때 타이머가 시작하도록 버튼과 타이머를 연동합니다.

ElevatedButton(
  onPressed: () {
    if (!timer.isActive) {
      startTimer();
    }
  },
  child: Text(timer.isActive ? '타이머 실행 중' : '타이머 시작'),
)

5. 앱 실행 및 테스트

앱을 실행하고 버튼을 눌러 타이머가 동작하는지 확인합니다. 타이머가 0에 도달하면 중지됩니다.

---