Smooth Counter

Smooth Counter is a plugin that allows you to perform smooth count-ups or count-downs, just like the Text widget, with simple arguments.

Getting started

Add smooth_counter to your pubspec.yaml file.

Requirements

Dart 3.0.0+
flutter 3.10.0+

Usage

You can either pass count directly to the widget or use a controller.

Using count

This is the simplest method. Just pass an int variable and the animation will be performed.

class _CounterState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter += 100;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SmoothCounter(
          count: _counter,
          textStyle: Theme.of(context).textTheme.headlineMedium,
        ),
        FilledButton(
          onPressed: _incrementCounter,
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

Using controller

If you want to change the animation's curve or duration, use a controller.

class _CounterState extends State<MyHomePage> {
  final _controller = SmoothCounterController(
    duration: const Duration(milliseconds: 1000),
  );

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _incrementCounter() {
    _controller.count += 100;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SmoothCounter(
          controller: _controller,
          textStyle: Theme.of(context).textTheme.headlineMedium,
        ),
        FilledButton(
          onPressed: _incrementCounter,
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

Separator

It is possible to set whether to show separators for numbers. default is true,

SmoothCounter(
  count: _counter,
  hasSeparator: false, // or true
),

	true	false
result	Separated	Not separated
img

Animation on initial display

It is possible to set whether to perform scroll animation of the counter when it is built for the first time. default is true,

SmoothCounter(
  count: _counter,
  animateOnInit: false, // or true
),

	true	false
result	Animate	No animation
img

License

Smooth Counter is released under the BSD-3-Clause License.

KyoheiG3/smooth_counter