odometer 3.0.0 icon indicating copy to clipboard operation
odometer: ^3.0.0 copied to clipboard

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

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
62
likes
140
pub points
89%
popularity

Publisher

unverified uploader

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

Homepage

Documentation

API reference

License

Icon for licenses.BSD-3-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on odometer