[flutter] 플러터에서 useTimer 훅(hook)을 사용한 타이머 기능 구현

14 Dec 2023

flutter

플러터(Flutter) 앱에서 타이머(timer) 기능을 구현하려면, useTimer 훅(hook)을 사용할 수 있습니다. useTimer 훅은 기본적으로 지정된 시간 간격으로 동작하는 타이머를 쉽게 만들 수 있게 해줍니다. 이 글에서는 useTimer 훅을 사용하여 간단한 타이머 기능을 구현하는 방법에 대해 알아보겠습니다.

1. useTimer 훅 설치

먼저, 플러터 프로젝트에서 useTimer 훅을 사용하기 위해 flutter_hooks 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다:

dependencies:
  flutter_hooks: ^0.18.0

그런 다음, 패키지를 설치합니다:

flutter pub get

2. useTimer 훅 사용

사용할 화면의 파일에서 다음과 같이 useTimer 훅을 import 합니다:

import 'package:flutter_hooks/flutter_hooks.dart';

그리고 다음과 같이 useTimer 훅을 사용하여 타이머를 구현할 수 있습니다:

void myTimerFunction() {
  useTimer(const Duration(seconds: 1), (timer) {
    // 매 초마다 실행되는 로직
  });
}

위 코드에서 const Duration(seconds: 1)은 1초 간격으로 타이머가 실행되도록 설정하고, timer 콜백 함수 내에서 매 초마다 실행되는 로직을 작성할 수 있습니다.

3. 타이머 사용 예제

아래는 타이머를 사용하여 화면에 초 카운트를 표시하는 예제 코드입니다:

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final seconds = useState(0);

    useTimer(const Duration(seconds: 1), (_) {
      seconds.value++;
    });

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Timer Example'),
        ),
        body: Center(
          child: Text(
            'Seconds: ${seconds.value}',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

위 코드에서 useTimer 훅을 사용하여 1초 간격으로 seconds 값을 증가시키고, 화면에 초 카운트를 표시합니다.

이제 당신도 useTimer 훅을 활용하여 간단한 타이머 기능을 쉽게 구현할 수 있게 되었습니다!