[Flutter]Ticker냐, Timer냐 그것이 문제로다.

임효진·2024년 3월 26일

Flutter

목록 보기

13/20

사내 기능 구현 중, 곱셈 문제를 푸는 기능이 있다. 문제 풀이 시, 타이머가 노출되어야하는 부분이 있었다.

Ticker와 Timer는 Flutter에서 시간 기반의 작업을 수행할 때 사용되는 두 가지 다른 메커니즘이다.
이 둘은 사용 목적과 작동 방식에서 차이가 있다.

Timer

Dart의 dart:async 패키지에 정의된 Timer 클래스는 일정 시간이 지난 후에 콜백을 실행한다.
단일 실행(Timer(Duration, callback)) 또는
반복 실행(Timer.periodic(Duration, callback))으로 사용할 수 있다.
Timer는 Dart의 모든 환경에서 사용할 수 있으며
, Flutter 앱뿐만 아니라 Dart의 서버 사이드 코드에서도 사용된다.
Timer는 비동기 작업을 예약하는 데 사용될 수 있지만,
프레임 레이트에 맞춰서 애니메이션을 제어하는 데는 최적화되어 있지 않다.

Ticker

Flutter의 Ticker 클래스는 애니메이션 프레임을 생성하기 위해 특별히 설계되었다.
Ticker는 매 프레임마다 콜백을 호출하며, Flutter의 애니메이션 시스템과 밀접하게 통합되어 있다.
Ticker는 위젯의 수명 주기에 연결되어 있으며,
위젯이 화면에서 제거될 때 자동으로 중지된다.
이는 리소스를 효율적으로 관리할 수 있게 해준다.
AnimationController는 내부적으로 Ticker를 사용하여 애니메이션의 진행을 관리한다.
AnimationController를 사용하면, 애니메이션의 시작, 중지, 역방향 재생 등을 쉽게 제어할 수 있다.

사용 시 장점

성능 최적화:
Ticker와 AnimationController는 Flutter의
프레임 렌더링 시스템과 긴밀하게 통합되어 있어,
애니메이션과 화면 갱신을 효율적으로 처리할 수 있다.
수명주기 관리:
AnimationController는 StatefulWidget의 수명주기와 연동되어
자동으로 리소스를 관리할 수 있게 해준다.
예를 들어, 위젯이 화면에서 제거될 때 AnimationController를
자동으로 정리(dispose)할 수 있다.
유연한 애니메이션 제어:
애니메이션의 진행률, 방향, 속도 등을 쉽게 조절할 수 있어,
다양한 애니메이션 효과를 구현할 수 있다.

차이점 요약

목적:
Timer는 일정 시간 후에 작업을 수행하는 데 초점을 맞추고 있으며, Ticker는 애니메이션과 같이 시간에 따라 연속적으로 변화하는 작업을 위해 설계되었다.
통합:
Ticker는 Flutter의 애니메이션 시스템과 밀접하게 통합되어 있어, 위젯의 수명 주기와 연동되고 애니메이션을 쉽게 제어할 수 있다.
반면 Timer는 더 일반적인 용도로 사용되며,
Flutter 앱 내에서 특별한 애니메이션 제어 없이 시간 기반 작업을 수행할 때 유용하다.
사용 환경:
Timer는 Dart 전체에서 사용할 수 있는 반면, Ticker와 AnimationController는 Flutter 프레임워크에 특화되어 있다.

Timer 예시

import 'dart:async';

void main() {
  // 단일 실행 Timer
  Timer(Duration(seconds: 2), () {
    print('2초 후에 실행됩니다.');
  });

  // 반복 실행 Timer
  Timer.periodic(Duration(seconds: 1), (timer) {
    print('매 초마다 실행됩니다.');
    if (timer.tick >= 5) {
      timer.cancel(); // 5번 실행 후 타이머 종료
    }
  });
}

Ticker 예시


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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late final Ticker _ticker;
  int _tick = 0;

  @override
  void initState() {
    super.initState();

    _ticker = createTicker((Duration elapsed) {
      setState(() {
        _tick++;
      });
    })
    ..start();
  }

  @override
  void dispose() {
    _ticker.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Ticker 예시')),
        body: Center(child: Text('Tick: $_tick')),
      ),
    );
  }
}