smooth_counter 1.1.0

A Flutter package that is a smooth running counter widget.

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.8.0+
• Flutter 3.32.0+

Usage

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

Using count

This is the simplest method. Just pass a number (int or double) and the animation will be performed.

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

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SmoothCounter(
          count: _counter,
          formatString: '#,##0.00',
          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'),
        ),
      ],
    );
  }
}

Number Formatting

You can customize the number format using formatString or format parameter. By default, numbers are displayed with thousand separators.

// Default: with thousand separators
SmoothCounter(
  count: _counter,
),

// Two decimal places
SmoothCounter(
  count: _counter,
  formatString: '#,##0.00',
),

// Without separators
SmoothCounter(
  count: _counter,
  formatString: '0',
),

// Custom format using NumberFormat
SmoothCounter(
  count: _counter,
  format: NumberFormat.currency(symbol: '\$'),
),

	With separator	Without separator
result	Separated	Not separated
img

Prefix and Suffix

You can add text before or after the counter value.

SmoothCounter(
  count: _counter,
  prefix: '\$',
  suffix: ' USD',
  textStyle: Theme.of(context).textTheme.headlineMedium,
),

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.