NumberTicker#

숫자가 부드럽게 보간되며 변경되는 애니메이션 효과를 가진 숫자 표시 컴포넌트입니다. 통계, 카운터, 대시보드 수치 표시에 적합합니다.

Live Preview#

class NumberTickerDefaultExample extends StatefulComponent {
  const NumberTickerDefaultExample({super.key});

  @override
  State<NumberTickerDefaultExample> createState() =>
      _NumberTickerDefaultExampleState();
}

class _NumberTickerDefaultExampleState
    extends State<NumberTickerDefaultExample> {
  @override
  Component build(BuildContext context) {
    return CoNumberTicker(value: 1234, initialValue: 0);
  }
}

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

  @override
  State<NumberTickerDefaultExample> createState() =>
      _NumberTickerDefaultExampleState();
}

class _NumberTickerDefaultExampleState
    extends State<NumberTickerDefaultExample> {
  @override
  Widget build(BuildContext context) {
    return CoNumberTicker(
      value: 1234,
      initialValue: 0,
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

• 대시보드에서 실시간으로 변하는 수치를 시각적으로 강조하고 싶을 때
• 랜딩 페이지에서 사용자 수, 매출 등 인상적인 통계 수치를 애니메이션으로 표시할 때
• 게임이나 포인트 시스템에서 점수 변화를 생동감 있게 표현할 때

대신 다른 컴포넌트를 사용하세요:

• Countdown: 남은 시간을 초 단위로 표시할 때
• Progress: 완료율이나 진행률을 바 형태로 표시할 때
• Text: 단순 숫자 표시로 충분하고 애니메이션이 필요 없을 때

기본 사용법 (Basic Usage)#

// 기본 숫자 틱커
CoNumberTicker(value: 1234)

// 커스텀 포맷터 (통화)
CoNumberTicker(
  value: 98765,
  formatter: (n) => '\$${n.toStringAsFixed(2)}',
  duration: Duration(milliseconds: 800),
)

// 커스텀 빌더 (완전한 표시 제어)
CoNumberTicker.builder(
  value: score,
  builder: (context, value, child) {
    return Text(
      '${value.toInt()} points',
      style: TextStyle(fontSize: 24),
    );
  },
)

// 기본 숫자 틱커
CoNumberTicker(value: 1234)

// 커스텀 포맷터 (통화)
CoNumberTicker(
  value: 98765,
  formatter: (n) => '\$${n.toStringAsFixed(2)}',
  duration: Duration(milliseconds: 800),
)

Props / Parameters#

동작 스펙 (Behavior)#

애니메이션#

• value가 변경되면 이전 값에서 새 값으로 부드럽게 보간
• 기본 500ms ease-in-out 커브
• 애니메이션 중 새 값이 들어오면 현재 값에서 새 값으로 전환

사용 가이드라인 (Usage Guidelines)#

Do#

CoNumberTicker(
  value: revenue,
  formatter: (n) => '\$${n.toStringAsFixed(0)}',
)

Don't#

접근성 (Accessibility)#

스크린 리더#

• Flutter: Semantics 위젯으로 현재 값 설명 제공 권장
• Web: aria-live="polite"로 값 변경 알림

크로스 플랫폼 차이점 (Platform Differences)#

관련 컴포넌트 (Related Components)#

• Stat: 라벨과 함께 통계 수치를 표시
• Countdown: 시간 기반 카운트다운
• Progress: 진행률 시각화