How to make scrolling counter in flutter

Issue

I would like to create a scrolling counter and I’m wondering on how to implement this in flutter.

enter image description here

Solution

I wanted to do this in a project, so I create an implicit animation widget, called AnimatedFlipCounter, that achieves similar effect.

I have published it as a package: https://pub.dev/packages/animated_flip_counter

Usage:

AnimatedFlipCounter(
   duration: Duration(milliseconds: 500),
   value: _value, /* pass in a number like 2014 */
)

AnimatedFlipCounter demo

Decimals:

AnimatedFlipCounter(
  value: _value,
  fractionDigits: 2, // decimal precision
  suffix: "%",
  textStyle: TextStyle(
      fontSize: 40,
      color: _value >= 0 ? Colors.green : Colors.red,
  ),
)

Decimal demo

Answered By – user1032613

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.