An implicit animation widget that flips from one number to another

animated_flip_counter

an implicit animation widget that flips from one number to another.

usage

it can be useful to display information that’s constantly changing.

animated counter

simply pass in a value and an optional duration and curve, just like any other implicit animation widget in flutter.

animatedflipcounter(
  duration: duration(milliseconds: 500),
  value: _value, // pass in a value like 2014
)

decimal display

use fractiondigits to specify how many digits to show after the decimal point. it handles negative values as well.

animatedflipcounter(
  value: _value,
  fractiondigits: 2, // decimal precision
  suffix: "%",
  textstyle: textstyle(
      fontsize: 40,
      color: _value >= 0 ? colors.green : colors.red,
  ),
)

custom style

use the familiar textstyle parameter for styling, and use prefix and suffix for additional texts.

animatedflipcounter(
  value: _value,
  prefix: "level ",
  textstyle: textstyle(
    fontsize: 80,
    fontweight: fontweight.bold,
    letterspacing: -8.0,
    color: colors.yellow,
    shadows: [
      boxshadow(
        color: colors.orange,
        offset: offset(8, 8),
        blurradius: 8,
      ),
    ],
  ),
)