Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
odometer cover
Package detailsv3.0.0

odometer

Highly customizable widgets that you can use for the number transition and the counter animations.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
836
Likes
100
Pub points
150

Install package

flutter pub add odometer

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Odometer is a Flutter package providing highly customizable widgets for smooth number transition and counter animations. It enables developers to create visually engaging numeric displays, such as countdowns, score counters, or dynamic value updates, with elegant animation effects. The package supports various styling options, including digit size, color, spacing, and animation duration, making it ideal for dashboards, games, or real-time data visualization. Built with performance in mind, it works seamlessly across Android, iOS, Web, macOS, Windows, and Linux platforms.

Use cases

  • Real-time score tracking
  • Countdown timers
  • Dynamic data displays
  • Dashboard metrics
  • Game score counters
  • Animated statistics

Key features

  • Smooth number transition animations
  • Customizable digit appearance
  • Configurable animation speed
  • Support for negative numbers
  • Responsive design integration
  • Cross-platform compatibility

Suitable for

  • Gamification features
  • Data visualization dashboards
  • Interactive UI elements
  • Educational apps
  • Live event trackers

Considerations

  • May impact performance with many instances
  • Requires careful tuning for high-frequency updates
  • Limited to numeric values only
  • Not suitable for non-numeric transitions
  • Best used with stable data sources

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Build Status pub stars style: lint

Odometer

The package which was inspired by the package Odometer js.

Examples of counter animation customization are made using this package:

Examples Gif

In this package you will find pre-built widgets:

  • AnimatedSlideOdometerNumber
  • SlideOdometerTransition

and high modifiable widgets:

  • AnimatedOdometer
  • OdometerTransition

AnimatedSlideOdometerNumber

The ImplicitlyAnimatedWidget uses the AnimatedOdometer with the sliding and fading digits transitions.

   AnimatedSlideOdometerNumber(
     numberTextStyle: TextStyle(fontSize: 15),
     odometerNumber: OdometerNumber(_counter),
     duration: Duration(seconds: 1))

SlideOdometerTransition

The ExplicitlyAnimatedWidget uses the OdometerTransition with the sliding and fading digits transitions.

    SlideOdometerTransition(
      numberTextStyle: TextStyle(fontSize: 15),
      odometerAnimation: _odometerAnimation,
      duration: Duration(seconds: 1))

Base widgets AnimatedOdometer and OdometerTransition

The AnimatedOdometer is based on implicit animation, and the OdometerTransition is based on explicit animation. To customize the odometer, you need to use two OdometerAnimationTransitionBuilders for new and old numbers. You will have access to:

  • The digit
  • The digit place
  • The animation progress of this digit

Categories

Animation & Transition

Source repository

Projects using this package

No data available yet.