gitwtfhub

wtf is number_flow_flutter?

briankariuki/number_flow_flutter — explained in plain English

Analysis updated 2026-05-18

13DartAudience · developerComplexity · 2/5Setup · easy

TL;DR

A Flutter package that animates numbers and clocks with digit-by-digit rolling transitions, locale-aware formatting, and optional spring and motion blur effects.

Mindmap

mindmap
  root((number_flow_flutter))
    What it does
      Roll changed digits
      Format numbers and time
      Motion blur and springs
    Tech stack
      Dart
      Flutter
    Use cases
      Animate counters
      Show currency or percent
      Animate clocks and timers
    Audience
      Flutter developers
      Vibe coders

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Animate a counter, score, or currency amount so only the changed digits roll to their new value.

REASON 2

Display compact or scientific number formats, like turning 1,234,567 into 1.2M, with locale-correct formatting.

REASON 3

Show an animated clock, countdown, or stopwatch driven by a Duration or DateTime.

REASON 4

Drive a live-updating number display from a slider or chart scrubber without rebuilding the whole widget.

What's in the stack?

DartFlutter

How it stacks up

briankariuki/number_flow_flutterlportals/rolling_textjiminlee-way/sejongunivmobile
Stars131314
LanguageDartDartDart
Setup difficultyeasyeasymoderate
Complexity2/52/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min

Wtf does this do

number_flow_flutter is a Flutter package for showing numbers on screen that animate smoothly whenever their value changes, similar to an odometer counting up or down. Instead of the whole number just jumping to a new value, only the digits that actually changed roll into place while the others stay still, and the whole display resizes gracefully as the number grows or shrinks digits. The package includes two widgets. NumberFlow handles plain numbers, currency amounts, percentages, and compact or scientific notation such as showing 1,234,567 as 1.2M, with formatting that adjusts correctly for different languages and regions, including right to left text. TimeFlow is built for clocks, countdowns, and stopwatches, and can be fed either individual hour, minute, and second values or a Duration or DateTime object directly. You can customize how the animation looks, choosing between a default easing curve or an iOS style spring effect that overshoots slightly and hands off its motion smoothly if a new value arrives mid animation. There is also an optional motion blur effect that blurs digits while they are rolling quickly and sharpens as they settle, plus a squish effect that compresses a moving digit slightly before it springs back to full width. A separate scrub mode lets you drive the display directly from a rapidly changing value, such as a slider being dragged or a chart being scrubbed, without needing to rebuild the whole widget on every tiny change. Other options include adding a prefix or suffix to the number, controlling whether digits animate upward or downward, limiting individual digit positions to a maximum value, and callbacks that fire when an animation starts or finishes. The widgets also expose a plain text description of the number for screen readers, and they automatically respect the operating system's reduce motion setting so the numbers snap into place instead of animating for users who prefer that. To use it, you add the package to your Flutter project's pubspec.yaml file.

Yoink these prompts

Prompt 1
Show me how to add number_flow_flutter to my Flutter app and animate a simple counter with NumberFlow.
Prompt 2
Help me configure NumberFlow to display currency in USD with an iOS-style spring animation.
Prompt 3
Set up a TimeFlow countdown timer in my Flutter app using a Duration that updates every second.
Prompt 4
Explain how to use NumberFlow.scrub to animate a number as a user drags a slider.

Frequently asked questions

wtf is number_flow_flutter?

A Flutter package that animates numbers and clocks with digit-by-digit rolling transitions, locale-aware formatting, and optional spring and motion blur effects.

What language is number_flow_flutter written in?

Mainly Dart. The stack also includes Dart, Flutter.

How hard is number_flow_flutter to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is number_flow_flutter for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.