animated_number_flow

A per-digit animated number ticker for Flutter - only the digits that change move, and they roll up when the value increases, down when it decreases. Locale-free formatting, configurable animation, prefix/suffix friendly.

iOS demo

Features

Per-digit roll: only the characters that actually changed move.
Direction-aware: digits roll up on increase, down on decrease.
Locale-free thousands grouping and fixed decimal places out of the box.
Bring-your-own format for currency, percentages, units, prefixes or suffixes.
Configurable duration and curve; standard TextStyle and color.
Right-aligned slots: a growing number inserts a new leading character instead of re-rolling the existing leading digit.

Getting started

Add the dependency:

dependencies:
  animated_number_flow: ^0.1.0

Import it:

import 'package:animated_number_flow/animated_number_flow.dart';

Usage

NumberFlow(
  value: score,
  format: NumberFlowDefaults.thousandsLong(),
)

Every value change animates only the digits that actually changed.

Price with two decimal places

NumberFlow(
  value: price,
  format: NumberFlowDefaults.thousands(decimalPlaces: 2),
  textStyle: Theme.of(context).textTheme.displaySmall,
)

Custom format

NumberFlow(
  value: balance,
  format: (v) => '\$' + NumberFlowDefaults.thousands(decimalPlaces: 2)(v),
)

Custom animation

NumberFlow(
  value: score,
  duration: const Duration(milliseconds: 600),
  curve: Curves.easeOutCubic,
)

Formatting helpers

NumberFlowDefaults provides thousands(...), thousandsLong(...), plainDouble and plainLong. The pure functions formatWithThousands(...) and groupThousands(...) are exported too, so you can reuse them without the widget.

A note on growing numbers

Slots are keyed by their distance from the right edge of the string. When a number grows (for example 99 to 100), the existing trailing digits stay put and a fresh leading character rolls in on the left, rather than the leading digit visibly changing. This differs intentionally from a strict left-index ticker.

Other platforms

The same number ticker is available for other platforms:

Compose Multiplatform (original): number-flow
React Native: react-native-number-flow

License

Licensed under the Apache License, Version 2.0. See LICENSE.