slot_machine_effect 0.0.2

A slot machine reel for Flutter. Spins up, drifts to a stop on the value you ask for, and rocks into place with a small bounce.

slot_machine_effect

A slot machine reel for Flutter. Spins up, runs, drifts to a stop on the value you ask for, and rocks into place with a small bounce.

Usage

SlotMachineReel(
  height: 125,
  width: 300,
  target: 7,
  itemBuilder: (value) => Center(child: Text('$value')),
)

The reel spins whenever target changes. It does not spin on load — it sits on target until something moves it.

Starting on a placeholder

Park the reel on a neutral face until a result arrives, with placeholder:

SlotMachineReel(
  height: 125,
  width: 300,
  itemCount: 11,     // 0-9, plus a blank at index 10
  placeholder: 10,   // shown until the first spin
  target: result,
  itemBuilder: (value) =>
      Center(child: Text(value == 10 ? '?' : '$value')),
)

Without placeholder, the reel rests on target.

Several reels

Stagger delay so they stop one after another, like a real machine:

Row(
  children: [
    for (var i = 0; i < digits.length; i++)
      SlotMachineReel(
        height: 100,
        width: 60,
        target: digits[i],
        delay: Duration(milliseconds: 200 * i),
        itemBuilder: (value) => Center(child: Text('$value')),
      ),
  ],
)

Custom symbols

itemCount sets how many values the reel cycles through, and itemBuilder draws each one — they need not be digits:

SlotMachineReel(
  height: 100,
  width: 100,
  itemCount: 4,
  target: 2,
  itemBuilder: (value) => Icon([
    Icons.star,
    Icons.favorite,
    Icons.diamond,
    Icons.bolt,
  ][value]),
)

Properties

Property	Default	Description
height, width	required	Viewport size. height is also each item's extent.
target	required	Value to land on, 0 to itemCount - 1. Changing it spins the reel.
itemBuilder	required	Builds the widget for each value.
placeholder	target	Value the reel rests on before its first spin.
itemCount	10	How many values the reel cycles through.
delay	0ms	Wait before spinning. Stagger this across reels.
duration	2100ms	Spin time: wind-up, run, then a long wind-down.
spins	3	Extra full loops before landing.
reverse	false	Spin towards decreasing values instead.
bounceExtent	0.20	Overshoot past the target, as a fraction of height. 0 disables it.
bounceDuration	260ms	How long the reel rocks back into place.
diameterRatio	4	Wheel curvature. Higher looks flatter.
physics	none	Scroll physics, if you want the reel draggable.
onSpinStart	—	Called when a spin begins, including the delay.
onSettled	—	Called once the reel rests on target.

Notes

• Spins are triggered by target changing. Assigning the value it already holds is a no-op, so to land on the same symbol twice you need the value to change in between. The reel never spins on its own, including on load.
• Spamming is safe. Requests arriving during a spin are ignored, so the motion always runs to completion. Use onSpinStart / onSettled to disable a button while it runs.

Motion

The spin is one continuous velocity profile integrated into position, rather than separate animations chained together, so there is no speed discontinuity between phases. Both ramps use smoothstep, which has zero slope at each end, so acceleration is continuous too. The wind-down carries slightly past the target and arrives at zero speed — where a real reel's overshoot peak is — and the bounce takes over from rest.