9

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

enter image description here

Ravi Dhorajiya
  • 1,531
  • 3
  • 21
  • 26

3 Answers3

19

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

WSBT
  • 33,033
  • 18
  • 128
  • 133
  • great but how to implement a double value? + i have interest to contribute to this project can you provide to project link? – ElMobark Jul 05 '21 at 10:23
  • @ElMobark Thanks for your suggestion. I have updated it with decimal support, and published it to pub, please see the link in the updated answer. – WSBT Jul 13 '21 at 17:55
  • Hello again, I'm really amazed by your work , anyway I'm working on a Flutter library that makes splash screen like twitter do in iOS I will be very grateful if I benefit from your amazing skills, what do you think? Can we participate? – ElMobark Aug 06 '21 at 12:46
1

You should be implement below ways

class ValueChangeAnimationWidget extends StatefulWidget {
  @override
  ValueChangeAnimationWidgetState createState() =>
      ValueChangeAnimationWidgetState();
}

class ValueChangeAnimationWidgetState
    extends State<ValueChangeAnimationWidget> with TickerProviderStateMixin {
  AnimationController controller;
  Animation animation;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(
        duration: const Duration(milliseconds: 1000), vsync: this);
    final Animation curve =
    CurvedAnimation(parent: controller, curve: Curves.easeOut);
    animation = IntTween(begin: 0, end: 10).animate(curve)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          controller.reverse();
        }
        if (status == AnimationStatus.dismissed) {
          Navigator.pop(context);
        }
      });
  }

  @override
  Widget build(BuildContext context) {
    controller.forward();
    return AnimatedBuilder(
        animation: controller,
        builder: (BuildContext context, Widget child) {
          return Scaffold(
              body: new Center(
                child: Text(animation.value.toString(), style: TextStyle(fontSize: 48.0)),
              ));
        });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}
Nikhil Vadoliya
  • 1,542
  • 10
  • 17
0

i use tween animation with animation builder

IntTween(begin: 0, end: starredCount).animate(
      CurvedAnimation(parent: animationController, curve: Curves.easeOut)
Murat Aslan
  • 1,446
  • 9
  • 21
  • Thanks for the reply @murat. Can you please explain in brief. I'm not getting your answer. – Ravi Dhorajiya Jun 15 '19 at 07:17
  • @Murat Aslan please provide proper codes to run it. – Rajesh Oct 20 '22 at 13:55
  • @RaviDhorajiya I tried to figure out his snippet, but the results are not as expected, anyhow I leave it here: return TweenAnimationBuilder( tween: IntTween(begin: 0, end: 1500), duration: const Duration(milliseconds: 1500), builder: (BuildContext context, int val, _) { return Text('$val'); }, ); – Rajesh Oct 20 '22 at 14:03