GlassStepper class

A glass-aesthetic numeric stepper matching iOS 26's UIStepper control.

GlassStepper is the Flutter equivalent of iOS 26's UIStepper. It renders a compact horizontal pill with a decrement (−) button on the left, an increment (+) button on the right, and a thin vertical divider between them — all wrapped in a liquid glass material.

Behaviour

• Tapping − or + calls onChanged with the updated value and fires HapticFeedback.lightImpact.
• Holding either button triggers auto-repeat after autoRepeatDelay, firing every autoRepeatInterval until released (matching iOS behaviour).
• At min the − button is visually disabled; at max the + button is disabled (unless wraps is true, in which case the value cycles).
• Button sides animate to a slightly pressed scale on touch-down.

Value display

iOS 26's native UIStepper does not show the value inside the control — the value is always displayed in a separate label by the app. GlassStepper follows this convention. To show the value, place a Text widget next to it:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text(
      '$_quantity',
      style: TextStyle(fontSize: 22, color: CupertinoColors.white, fontWeight: FontWeight.w600),
    ),
    const SizedBox(width: 16),
    GlassStepper(
      value: _quantity.toDouble(),
      min: 1,
      max: 99,
      onChanged: (v) => setState(() => _quantity = v.toInt()),
    ),
  ],
)

Properties