Number input

number input

Input elements of type numbers are used to let the user enter a number. This can be used to reject non-numerical entries or select quantities.

Usage

XelaNumberInput(
    onChange: (val) {
      if(val < 0) {
        setState(() {
          value = 0;
        });
      }
    },
    label: "width",
    helperText: "Helper Text",
    value: value,
    decreaseIcon: Icon(Icons.remove, size:15, color:_isDark ? XelaColor.Gray11 : XelaColor.Gray2),
    increaseIcon: Icon(Icons.add, size: 15, color: _isDark ? XelaColor.Gray11 : XelaColor.Gray2),
    defaultBorderColor: _isDark ? XelaColor.Gray4 : XelaColor.Gray11,
    defaultBackground: _isDark ? Colors.transparent : Colors.white,
    labelColor: _isDark ? XelaColor.Gray6 : XelaColor.Gray8,
    valueColor: _isDark ? XelaColor.Gray11 : XelaColor.Gray2,
    helperTextColor: _isDark ? XelaColor.Gray6 : XelaColor.Gray8
  )

Properties

Name Type Default Value Required Description
value int - YES Value for number input
state XelaNumberInputState XelaNumberInputState.DEFAULT NO State for number input (DEFAULT, ERROR, SUCCESS, FOCUS, DISABLED)
decreaseIcon Widget? null NO Decrese Icon widget
increaseIcon Widget? null NO Increase Icon widget
helperText String? null NO Helper text for number input
label String? null NO Label text for number input
labelColor Color XelaColor.Gray8 NO Label text color
valueColor Color XelaColor.Gray2 NO Value text color
helperTextColor Color XelaColor.Gray8 NO Helper text color
defaultBackground Color Colors.white NO Default background color
disabledBackground Color XelaColor.Gray12 NO Disabled background color
defaultBorderColor Color XelaColor.Gray11 NO Default state border color
focusBorderColor Color XelaColor.Blue5 NO Focus state border color
errorBorderColor Color XelaColor.Red3 NO Error state border color
successBorderColor Color XelaColor.Green1 NO Success state border color
disabledBorderColor Color XelaColor.Gray8 NO Disabled state border color