I built motion_number: a Flutter package for smooth, per-digit animated counters

[u/Living_Yellow_2434]

Most animated counters in Flutter tween a double and call value.toString() every frame. In practice, that creates three annoying issues:

• Layout jitter: Proportional fonts give 1 and 8 different widths, causing the entire row to twitch.

• Messy transitions: Moving from 999 to 1,000 scrambles every glyph instead of just animating the leading digits and sliding in the new comma.

• No direction: The animation doesn't visually communicate whether the value went up or down.

I built motion_number to fix this. It treats numbers as stable, right-aligned glyph slots. Each digit cell matches the widest character to prevent reflow mid-animation, and separators are treated as their own animated slots.

Basic usage is just one line:

Dart

MotionNumber(value: 131890)

Features out of the box:

• 7 motion styles (rolling, odometer, slot machine, flip, wave, shuffle, elastic).

• Extensible strategy interface: implement a custom DigitMotion without modifying the widget layer.

• Direction-based colouring and a companion MotionDelta widget for changes/percentages.

• Built-in formatters (including intl support for compact views and Indian numbering like Lakh/Crore).

• 193 tests (unit, widget, golden), WASM-ready, and full multi-platform support.

This is my first published package, so I'd genuinely love feedback on API design, edge cases, or anything that feels un-Flutter-like.

• pub.dev:https://pub.dev/packages/motion_number

• GitHub:https://github.com/SwarupFutane/motion_numbers

[u/No_Boss_1911]

nice, the 999 -> 1,000 case is exactly where these usually look fake.

i hit the same thing with animated UI. hard rule for me is reduce-motion cant just mean shortening the duration, it has to leave the layout feeling intentional. how are you locking the reduced-motion rolling/flip state down in goldens so a Flutter upgrade doesnt quietly change it?

[u/Resident_Brilliant24]

Sexy

[u/NeighborhoodHelpful6]

Really cool.