CNStepper class

A Cupertino-native stepper: a − / + control that changes a number by a fixed step.

On iOS 26+ this embeds the system stepper through a platform view, as a SwiftUI Stepper: it draws the same control as UIStepper, which on iOS 26+ ignores a tint and has no disabled look. On every macOS it embeds an NSStepper (the small up/down arrows that sit next to a text field). Below iOS 26 and on other platforms it draws a Flutter stepper shaped like the iOS 18 UIStepper.

The stepper shows no number of its own; put the value in a label next to it, as iOS does:

Row(
  children: [
    Text('Guests: ${guests.toInt()}'),
    const Spacer(),
    CNStepper(
      value: guests,
      min: 1,
      max: 12,
      semanticLabel: 'Guests',
      onChanged: (v) => setState(() => guests = v),
    ),
  ],
)

VoiceOver reads the stepper as one adjustable element, its semanticLabel followed by the value ("Guests, 3"); swiping up or down changes the value by step.

Inheritance
Available extensions

Constructors

CNStepper({Key? key, required double value, required ValueChanged<double> onChanged, double min = 0.0, double max = 100.0, double step = 1.0, bool wraps = false, bool autorepeat = true, bool enabled = true, Color? color, bool autoHideOnModal = true, String? semanticLabel})
Creates a Cupertino-native stepper.
const

Properties

autoHideOnModal → bool
When true (default), destroys the native stepper's PlatformView while a modal sheet is presented above this widget's host route. Prevents the iOS hybrid-composition z-order bleed (Issue #53) where the host-page PlatformView's pixels leak through a sheet that also contains a PlatformView (CN-widget). Requires CNTabBarRouteObserver() to be registered in the app's navigatorObservers. No effect on non-iOS or iOS < 26 (Flutter fallback path).
final
autorepeat → bool
When true (default), holding − or + keeps changing the value while it is held. When false, each press changes it once.
final
color → Color?
Tint of the stepper. Null keeps the system colours.
final
enabled → bool
Whether the control is interactive.
final
hashCode → int
The hash code for this object.
no setterinherited
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
max → double
Highest value. Must be greater than min. Defaults to 100, as UIStepper.
final
min → double
Lowest value. Must be less than max. Defaults to 0, as UIStepper.
final
onChanged → ValueChanged<double>
Called with the new value when the user taps − or +.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
semanticLabel → String?
What VoiceOver reads for the stepper, before its value.
final
step → double
Amount one tap adds or subtracts. Must be greater than 0.
final
value → double
Current value. Values outside min..max are clamped.
final
wraps → bool
When true, + at max goes to min and − at min goes to max. When false (default), the button at the limit is disabled.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<CNStepper>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
liquidGlass({CNGlassEffect effect = CNGlassEffect.regular, CNGlassEffectShape shape = CNGlassEffectShape.capsule, double? cornerRadius, Color? tint, bool interactive = false}) → Widget

Available on Widget, provided by the LiquidGlassExtension extension

Applies a Liquid Glass effect to this widget.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited