[Flutter] Ticker Class

 

Ticker Class

 

Ticker는 간단히 말해서 time tracker이다. Ticker는 어떠한 애니메이션이 시작된 이후, 경과된 시간을 기록하고, 경과된 시간에 대해 콜백을 실행시킨다. 또한, 다음 프레임을 연속적으로 set up하여 화면 전환이 부드럽고 연속적으로 보이게 한다. 즉, 플러터에서 애니메이션의 유려한 실행, 전환 등 UI의 '유동적인 움직임'을 보장하여 사용자에게 시각적인 효과를 줄 때 사용할 수 있다. 

 

 

예제

 

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

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

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Book App',
        debugShowCheckedModeBanner: false,
        home: TickerExample());
  }
}

class TickerExample extends StatefulWidget {
  const TickerExample({super.key});

  @override
  State<TickerExample> createState() => _TickerExampleState();
}

class _TickerExampleState extends State<TickerExample> {
  late Ticker ticker;

  double size = 1;

  @override
  void initState() {
    startAnimation();
  }

  startAnimation() {
    ticker = Ticker((elapsed) {
      setState(() {
        size = size + elapsed.inMicroseconds / Duration.microsecondsPerSecond;
      });
    });
    ticker.start();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: AnimatedContainer(
      duration: Duration(seconds: 2),
      curve: Curves.bounceInOut,
      width: 10 + size,
      height: 10 + size,
      color: Colors.blue,
    ));
  }
}

 

위 예제는 AnimatedContainer로 Ticker가 어떻게 size를 변화시키는지 나타낸다. Ticker가 시작되면, 시작 이후로 경과된 시간을 콜백으로 받게된다(elapsed). 이 경과시간에 따라 size의 크기를 키워 실제 유저가 보았을 때, 점차 커지는 container를 연출할 수 있게 되는 것이다.