Stepper

A numeric stepper: [ − 42 + ]. When focused, Up / Down (or + / −) change the value by step, PageUp / PageDown by largeStep, and Home / End jump to min / max. Typing digits enters a value directly; Enter or leaving the field commits it, and Escape cancels. Clicking the − or + half also nudges the value, so pointer users get the same affordance.

See also: NumberInput for typed numeric entry.

Learn more: Forms & validation

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

Stepper(
  value: _quantity,
  min: 0,
  max: 10,
  label: 'Quantity',
  onChanged: (value) => setState(() => _quantity = value),
)

Details

Controlled — hold the value yourself and update it from onChanged. Passing null for onChanged disables the stepper.

Constructors

Stepper()

Parameter	Type	Default	Description
value:	num	required	Current value.
onChanged:	void Function(num value)?	required	Called with the new value when the user nudges it.
min:	num?	—	Lower bound. null means unbounded below.
max:	num?	—	Upper bound. null means unbounded above.
step:	num	1	Amount added/subtracted on Up / Down / + / − or a click on a button.
largeStep:	num	10	Amount added/subtracted on PageUp / PageDown. Should be ≥ step.
formatter:	String Function(num value)?	—	Renders the value into the display string. Defaults to v.toInt().toString() for whole values and a one-decimal form otherwise — mirrors what BarChart uses, so the look matches.
label:	String?	—	Optional label shown to the left of the stepper.
focusNode:	FocusNode?	—	Focus node used for keyboard and text-input interaction.
autofocus:	bool	false	Whether the stepper should request focus when mounted.
style:	CellStyle?	—	Base styling for the value and frame, plus optional hover, focus, disabled, and invalid state entries from CellStyle.interactive.

Source

Stepper is defined in packages/fleury/lib/src/catalog/stepper.dart.

Category: Inputs & controls · All widgets

Live demo

stepper_example.dart

Restart Run Expand

Example · editable Revert Format

class _StepperExampleState extends State<_StepperExample> {
  num _v = 3;
  @override
  Widget build(BuildContext context) => Stepper(
    value: _v,
    min: 0,
    max: 10,
    label: 'Quantity',
    onChanged: (v) => setState(() => _v = v),
  );
}

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand