Tinyrack

Animated Number

숫자 값을 새 목표값으로 부드럽게 전환해요.

바뀐 숫자를 롤링하거나 로케일 형식의 목표값까지 부드럽게 보간해요.

핵심 속성

시맨틱 값은 웹과 공유하지만 위젯 동작은 Flutter와 Material 3 규약을 따라요.

설치

패키지를 추가한 뒤 공개 라이브러리를 가져오세요.

flutter pub add tinyrack_ui
import 'package:tinyrack_ui/tinyrack_ui.dart';

플레이그라운드

사용법

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

const TRAnimatedNumber(
  animation: TRAnimatedNumberAnimation.roll,
  value: 12345,
)

예시

카운터 고유 링크

애플리케이션 상태를 바꿔 표시 값을 위나 아래로 롤링해요.

애니메이션 모드 고유 링크

숫자 슬롯 이동에는 roll을, 연속적인 숫자 보간에는 count를 사용하세요.

숫자 형식 고유 링크

통화와 퍼센트에는 NumberFormat을, 단위에는 formatter 콜백을 전달하세요.

방향 고정 고유 링크

값의 증감과 관계없이 바뀐 숫자를 위나 아래로 이동시켜요.

API

AnimatedNumber는 Flutter의 네이티브 상태와 콜백을 유지하고 Tinyrack 토큰을 기본값으로 사용해요.