Tinyrack

Animated Number

数値を新しい目標値へ滑らかに遷移させます。

変更された数字をロールさせるか、ロケール形式の目標値まで滑らかに補間します。

主なプロパティ

セマンティック値は Web と共有し、ウィジェットの動作は 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 トークンを既定値として使用します。