flip_counter_plus 1.0.1

An implicit animation widget that flips from one number to another, with support for customize styles, decimals and negative values.

flip_counter_plus

An ultra-premium, high-performance implicit animation widget that flips numbers with style. Engineered for pixel-perfect accuracy, zero-latency rendering, and fluid kinetics.

🎬 Watch the Live Video Demo on YouTube

📸 Showcase

Counter Animation	Custom Styling & Transitions	Stock Market Ticker

---

⚡ Engineered for Performance & Visual Excellence

Behind the fluid mechanical aesthetics lies a highly optimized rendering engine designed for production-critical performance (e.g., real-time dashboards, tickers, stock markets):

• Zero GC / Repaint Isolation: Uses isolated rendering trees (RepaintBoundary) to contain redraws only to changing digits, preventing global screen rebuilds and eliminating Garbage Collection (GC) pauses during fast scrolls.
• Tabular Figure (Monospace) Alignment: Locks numeral layouts using native font tabular alignments to prevent layout shifting or "wobbly" UI adjustments.
• Tactile Kinetics: Supports staggered wave animations, direction-specific color shifts, and native mechanical dial haptic ticks.
• Custom Widget Injection: Supply any custom widget (icons, badges) as separators, prefixes, suffixes, or custom digit wrappers (e.g., neon slots, cardboard cards).

📊 Performance Benchmarks

In widget pipeline testing (simulating rapid real-time updates over 200 consecutive pumps), flip_counter_plus consistently maintains frame render times well below the standard frame budgets (16.6ms for 60 FPS, 8.3ms for 120 FPS):

Benchmark Case	Iterations	Total Time	Avg Frame Time	FPS Equivalent
Standard Integer	200	~950ms	2.3 ms	420+ FPS
Decimal & Separators	200	~870ms	2.1 ms	450+ FPS
Staggered Cascade	200	~540ms	1.3 ms	730+ FPS
Blur Transition	200	~740ms	1.8 ms	540+ FPS
Compact Notation	200	~510ms	1.2 ms	770+ FPS

Run benchmarks locally: flutter test test/performance_benchmark_test.dart

---

📱 Showcase App (Dashboard)

The package includes a comprehensive dashboard app in the example folder showing off the following tabs:

• Visual Sandbox: Tweak speed multipliers, stagger wave delays, and transition style pickers in real-time.
• Formatting & Localizations: View presets for major currencies (USD, EUR, GBP, JPY), percentages, compact notations, and regional digits.
• Custom Stylings: Custom card widgets for Retro Flip Clock, Cyberpunk Neon, Glass Nixie Tube, Wood Game Tile, Pill Capsule, and Morph.
• Lifecycle & Controller: Control the counter programmatically (play, pause, resume, reverse, loop, and reset).
• Stock Market Ticker: Real-time high-frequency stock quotes simulation, trend biases, and a mock order execution terminal.

---

📦 Installation

Add flip_counter_plus to your pubspec.yaml dependencies:

dependencies:
  flip_counter_plus: ^1.0.1

Or run the following command in your shell:

flutter pub add flip_counter_plus

---

🚀 Usage

Simple Counter

AnimatedFlipCounter(
  value: 2026,
  duration: Duration(milliseconds: 500),
)

Decimals & Custom Separators

AnimatedFlipCounter(
  value: _value, // e.g., 1234.56
  fractionDigits: 2,
  thousandSeparator: ',', // displays "1,234.56"
  decimalSeparator: '.',
  textStyle: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
)

Financial Display & Tinting

Auto-applies colors based on values and shows positive sign.

AnimatedFlipCounter(
  value: _value,
  showPositiveSign: true,
  increasingColor: Colors.green,
  decreasingColor: Colors.red,
)

---

🛠️ Advanced Customization

1. Custom Transitions & Wrapper Slots

AnimatedFlipCounter(
  value: _value,
  // Wrap each digit inside a custom card decoration
  digitWrapperBuilder: (context, index, child) => Container(
    margin: const EdgeInsets.symmetric(horizontal: 2),
    padding: const EdgeInsets.all(4),
    decoration: BoxDecoration(
      color: Colors.grey[900],
      borderRadius: BorderRadius.circular(4),
    ),
    child: child,
  ),
  // Override transition animation (e.g., Fade & Scale instead of Roll)
  digitTransitionBuilder: (context, current, next, progress, size) => Stack(
    alignment: Alignment.center,
    children: [
      Opacity(opacity: 1.0 - progress, child: Transform.scale(scale: 1.0 - progress, child: current)),
      Opacity(opacity: progress, child: Transform.scale(scale: progress, child: next)),
    ],
  ),
)

2. Staggered Cascades & Horizontal Tapes

AnimatedFlipCounter(
  value: _value,
  staggerDelay: Duration(milliseconds: 80),
  staggerDirection: StaggerDirection.rightToLeft, // rolls digits like a wave
  flipDirection: AxisDirection.left,             // scroll horizontally instead of vertical
)

3. Tactile Haptics & Programmatic Control

final controller = CounterController(initialValue: 100);

AnimatedFlipCounter(
  controller: controller,
  triggerHaptics: true, // system haptic ticks on every digit rollover
)

// Control from anywhere:
controller.animateTo(250);
controller.jumpTo(0); // instant update with no transition

4. Built-in Transition Styles & Preset Constructors

Choose premium preset transitions (roll, fade, scale, fadeScale, rotate, flip, blur) directly:

AnimatedFlipCounter(
  value: _value,
  transitionType: CounterTransitionType.blur, // motion blur transition
)

// Preconfigured factory constructors
AnimatedFlipCounter.usd(value: 1234.56)      // "$1,234.56"
AnimatedFlipCounter.eur(value: 1234.56)      // "1.234,56 €"
AnimatedFlipCounter.percentage(value: 99)   // "99%"
AnimatedFlipCounter.compact(value: 1250000)  // "1.3M"

---

⚙️ Key API Reference

Parameter	Type	Default	Description
value	num?	null	The value to display. Changes animate automatically.
controller	CounterController?	null	Controller for programmatic control / jumps.
duration	Duration	300ms	Duration of the digit flip animations.
fractionDigits	int	0	Number of decimal places to show.
thousandSeparator	String?	null	Group separators (e.g., ,).
decimalSeparator	String	'.'	Decimal point symbol.
useTabularFigures	bool	true	Forces monospace digits to prevent layout jumps.
showPositiveSign	bool	false	Shows a + sign for positive numbers.
transitionType	CounterTransitionType	.roll	Preset transitions (roll, blur, rotate, flip, scale...).
staggerDelay	Duration?	null	Sequential delay between changing digits.
triggerHaptics	bool	false	Haptic ticks on digit rollover boundaries.
compactNotation	bool	false	Abbreviates numbers (e.g., 1.2M, 5K).
increasingColor	Color?	null	Temporary text color when value increases.
decreasingColor	Color?	null	Temporary text color when value decreases.

Full parameters, custom builders, and listeners are fully documented in flip_counter_plus.dart.

---

📱 Platform Support

Supports Android, iOS, Web, macOS, Windows, and Linux out of the box with zero native configuration (100% pure Dart & Flutter).

---

👤 Maintainer

Hadi

• 🐙 github.com/Itsxhadi
• 📧 [e-mail]