odometer 2.1.0 odometer: ^2.1.0 copied to clipboard
Highly customizable widgets used to number transition and counter animation.
Odometer #
Package which was inspired by the package Odometer js.
Examples of counter animation customization made using this package:
In this package you will find pre-built widgets:
- AnimatedSlideOdometerNumber
- SlideOdometerTransition
and high modifiable widgets:
- AnimatedOdometer
- OdometerTransition
AnimatedSlideOdometerNumber #
ImplicitlyAnimatedWidget based on AnimatedOdometer with a slide and fade digits transition.
AnimatedSlideOdometerNumber(
numberTextStyle: TextStyle(fontSize: 15),
odometerNumber: OdometerNumber(_counter),
duration: Duration(seconds: 1))
SlideOdometerTransition #
ExplicitlyAnimatedWidget based on OdometerTransition with a slide and fade digits transition
SlideOdometerTransition(
numberTextStyle: TextStyle(fontSize: 15),
odometerAnimation: _odometerAnimation,
duration: Duration(seconds: 1))
Base widgets AnimatedOdometer and OdometerTransition #
AnimatedOdometer based on Implicit Animations and OdometerTransition based on explicit animation. to customize the odometer, you need to use two OdometerAnimationTransitionBuilders for new and old numbers you will have access to:
- digit
- digit place
- animation progress of this digit