flutter_animate_counter 1.0.0

A Flutter widget that animates numeric value changes with a smooth counting transition.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_animate_counter/flutter_animate_counter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Animate Counter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Animate Counter'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _amount = 1234567.89;
  CurrencyPreset _selected = CurrencyPresets.usd;
  bool _compact = false;
  bool _useDeviceLocale = false;

  void _increment() => setState(() => _amount += 100000);

  void _decrement() => setState(() => _amount -= 100000);

  void _reset() => setState(() => _amount = 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(vertical: 24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlutterAnimateCounter(
                value: _amount,
                duration: const Duration(milliseconds: 800),
                curve: Curves.easeOutCubic,
                currency: _selected.code,
                // Leaving locale unset lets FlutterAnimateCounter auto-detect
                // it from the app's Localizations ancestor instead.
                locale: _useDeviceLocale ? null : _selected.locale,
                compact: _compact,
                textStyle: Theme.of(context).textTheme.headlineMedium,
              ),
              const SizedBox(height: 24),
              DropdownButton<CurrencyPreset>(
                value: _selected,
                onChanged: (value) {
                  if (value != null) setState(() => _selected = value);
                },
                items: [
                  for (final option in CurrencyPresets.all)
                    DropdownMenuItem(
                      value: option,
                      child: Text('${option.code} — ${option.label}'),
                    ),
                ],
              ),
              const SizedBox(height: 12),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text('Compact'),
                  Switch(
                    value: _compact,
                    onChanged: (value) => setState(() => _compact = value),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Follow device locale (${Localizations.localeOf(context)})',
                  ),
                  Switch(
                    value: _useDeviceLocale,
                    onChanged: (value) =>
                        setState(() => _useDeviceLocale = value),
                  ),
                ],
              ),
              const SizedBox(height: 12),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  FilledButton(
                    onPressed: _decrement,
                    child: const Text('-100,000'),
                  ),
                  const SizedBox(width: 12),
                  OutlinedButton(onPressed: _reset, child: const Text('Reset')),
                  const SizedBox(width: 12),
                  FilledButton(
                    onPressed: _increment,
                    child: const Text('+100,000'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}