flutter_animate_counter 1.0.0

A Flutter widget that animates numeric value changes with a smooth counting transition.

A Flutter widget that animates numeric value changes with a smooth counting transition — give it a new value and it counts up (or down) from the old one instead of snapping.

Features

• Animates between any two num values (int or double).
• Animates from 0 (or a custom initialValue) up to value the moment it's first mounted, instead of just popping the final number in.
• Configurable duration and curve.
• Optional decimal places, thousand separator, decimal separator, prefix and suffix for manual number formatting.
• Built-in, locale-aware currency formatting for any world currency (ISO 4217 code) — correct symbol, symbol placement and decimal digits for that currency and locale (e.g. $1,234.56, 1.234,56 €, ¥12,345, Rp1.500.000).
• Compact K/M/B/T abbreviations for large numbers, with the abbreviation style itself following the locale (e.g. 1,2 jt for id_ID, 1,2 Mio. for de_DE).
• Auto-detects the app's current locale (from the nearest Localizations ancestor) when locale isn't set, so currency/compact formatting follows whichever country the app is running in without hardcoding one.

Getting started

Add the package to your pubspec.yaml:

dependencies:
  flutter_animate_counter: ^1.0.0

Usage

import 'package:flutter_animate_counter/flutter_animate_counter.dart';

FlutterAnimateCounter(
  value: counter, // change this and the widget animates to the new value
  duration: const Duration(milliseconds: 800),
  curve: Curves.easeOutCubic,
  textStyle: Theme.of(context).textTheme.headlineMedium,
)

Animating in on mount

By default, the very first time a FlutterAnimateCounter is built it counts up from 0 to value instead of just displaying value immediately:

FlutterAnimateCounter(value: 1234567) // counts up from 0 to 1,234,567 on mount

Use initialValue to start from something other than 0 (e.g. when restoring a previously known value), or set animateOnMount: false to skip the mount animation and show value right away:

FlutterAnimateCounter(value: 1234567, initialValue: 1000000) // counts up from 1,000,000
FlutterAnimateCounter(value: 1234567, animateOnMount: false) // shows 1,234,567 immediately

Currency formatting

Set currency to an ISO 4217 code and the value is formatted like real money for that currency — symbol, symbol placement and decimal digits all follow the currency and locale conventions, so you don't have to hardcode separators per country:

FlutterAnimateCounter(
  value: 1234567.89,
  currency: 'USD',
  locale: 'en_US', // -> $1,234,567.89
)

FlutterAnimateCounter(
  value: 1234567.89,
  currency: 'EUR',
  locale: 'de_DE', // -> 1.234.567,89 €
)

FlutterAnimateCounter(
  value: 1234567,
  currency: 'JPY',
  locale: 'ja_JP', // -> ¥1,234,567 (yen has no decimal digits)
)

FlutterAnimateCounter(
  value: 1500000,
  currency: 'IDR',
  locale: 'id_ID', // -> Rp1.500.000
)

currencySymbol and currencyDecimalDigits can override the default symbol or decimal digits for a currency when needed. When currency is set it takes over formatting from decimalPlaces, thousandSeparator, decimalSeparator, prefix and suffix.

Leave locale unset to follow the app's current locale automatically:

FlutterAnimateCounter(
  value: 1500000,
  currency: 'IDR',
  // No `locale` — uses Localizations.localeOf(context), so this shows
  // "Rp1.500.000" in an Indonesian-localized app and the equivalent for
  // whatever locale the app is running in elsewhere.
)

Compact notation (K/M/B)

Set compact: true to abbreviate large numbers instead of spelling every digit out:

FlutterAnimateCounter(
  value: 1234567,
  compact: true,
  locale: 'en_US', // -> 1.23M
)

FlutterAnimateCounter(
  value: 1234567,
  compact: true,
  currency: 'USD',
  locale: 'en_US', // -> $1.23M
)

The abbreviation follows locale just like currency does — the same value renders as 1,23 jt for id_ID or 1,23 Mio. for de_DE.

Manual number formatting

For non-currency numbers, format manually with decimalPlaces, thousandSeparator, decimalSeparator, prefix and suffix:

FlutterAnimateCounter(
  value: 1234567.5,
  decimalPlaces: 2,
  thousandSeparator: '.',
  decimalSeparator: ',',
  suffix: ' pts',
)

See /example for a full demo app, including a currency picker.

Additional information

Contributions and issues are welcome.