VelocityX gives you VxStepper - A control for incrementing or decrementing a value along with the input field.

By default, pressing a stepper’s button increments or decrements the stepper’s value repeatedly. The rate of change depends on the step counter. User can also set value through input field. To turn off this behavior, set the disableInput property to true.


Video Tutorial


The default value is 0 and the maximum value is 999 and the minimum value is 0 by default. The max should be greater than or equal to min and step should be greater than or equal to 1.

Using VxStepper

const VxStepper()

Using the VxStepper value

VxStepper(onChange: (value) {

Stepper sample

This widget can be very useful specially for e-commerce applications.


Prop (Type)DefaultDescription
defaultValue (int)0Value of the stepper
min (int)0Minimum allowed value
max (int)999Maximum allowed value
step (int)1Update counter
disableInput (bool)falseFor disabling manual input
onChange (ValueChanged)Callback for the final value
inputBoxColor (Color)Sets color of the rectangular input box
inputTextColor (Color)Sets color of the text in the rectangular input box
actionButtonColor (Color)Sets color of the circular action buttons
actionIconColor (Color)Sets color of the icon inside circular action buttons