Steppers

A Stepper is a compact control used to increase or decrease a numeric value by fixed increments. It provides a clear and efficient way for users to adjust quantities or numeric inputs without typing.

Use this component when you want users to quickly modify values (e.g., item quantity, number of guests, unit count).

---

Variants

Outline

A stepper with outline styling and border container.

Preview

Code

Steppers.outline(
  value: _value,
  onAdd: () => setState(() => _value++),
  onRemove: () => setState(() => _value--),
)

---

Round Button

A stepper with circular button controls.

Preview

Code

Steppers.roundButton(
  value: _value,
  onAdd: () => setState(() => _value++),
  onRemove: () => setState(() => _value--),
)

---

Outline Round Button

A stepper combining outline container with round button controls.

Preview

Code

Steppers.outlineRoundButton(
  value: _value,
  onAdd: () => setState(() => _value++),
  onRemove: () => setState(() => _value--),
)

---

Minimal

A compact stepper with minimal styling and vertical divider.

Preview

Code

Column(
  spacing: 8,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Value: $_value'),
    Steppers.minimal(
      value: _value,
      onAdd: () => setState(() => _value++),
      onRemove: () => setState(() => _value--),
    ),
  ],
)

---

Disabled State

A stepper in disabled state that cannot be interacted with.

Preview

Code

Steppers.outline(
  value: _value,
  disabled: true,
  onAdd: () => setState(() => _value++),
  onRemove: () => setState(() => _value--),
)

---

Properties

Steppers

Property	Type	Description
value	int	The current numeric value displayed in the stepper. Defaults to 0.
min	int	The minimum value that can be set. Value cannot go below this number. Defaults to 0.
max	int?	The maximum value that can be set. If null, there is no upper limit.
onAdd	void Function()?	Callback function when the add button is pressed to increment the value.
onRemove	void Function()?	Callback function when the remove button is pressed to decrement the value.
widgetAdd	Widget?	Custom widget to display as the add button. If null, uses default add icon.
widgetRemove	Widget?	Custom widget to display as the remove button. If null, uses default remove icon.
width	double	The width allocated for displaying the numeric value. Defaults to 40.
height	double?	The height of the stepper component.
spacing	double	The spacing between the remove button, value display, and add button. Defaults to 8.
style	TextStyle?	Custom text style for the displayed value.
isMinimal	bool	Whether to use minimal style with a vertical divider instead of value display. Defaults to false.
disabled	bool	Whether the stepper is disabled and cannot be interacted with. Defaults to false.

Static Constructors

Steppers.outline

Additional properties for the outline variant:

Property	Type	Description
border	BoxBorder?	Custom border for the container. If null, uses default gray border.
padding	EdgeInsetsGeometry?	Padding inside the container. Defaults to EdgeInsets.fromLTRB(8, 5, 8, 5).
borderRadius	BorderRadiusGeometry?	Border radius for the container. Defaults to BorderRadius.all(Radius.circular(100)).

Steppers.outlineRoundButton

Additional properties for the outline round button variant:

Property	Type	Description
border	BoxBorder?	Custom border for the container. If null, uses default gray border.
padding	EdgeInsetsGeometry?	Padding inside the container. Defaults to EdgeInsets.all(8).
borderRadius	BorderRadiusGeometry?	Border radius for the container. Defaults to BorderRadius.all(Radius.circular(100)).

Steppers.minimal

Additional properties for the minimal variant:

Property	Type	Description
border	BoxBorder?	Custom border for the container. If null, uses default gray border.
padding	EdgeInsetsGeometry?	Padding inside the container. Defaults to EdgeInsets.symmetric(horizontal: 8).
borderRadius	BorderRadiusGeometry?	Border radius for the container. Defaults to BorderRadius.all(Radius.circular(100)).