Description:

increment decrement form field

increment_decrement_form_field #
Increment or decrement a value using spaced horizontal IconButtons wrapped in a FormField #

Increment and decrement an integer (example) #
/*
increment, decrement an int
*/
IncrementDecrementFormField<int>(
// an initial value
initialValue: 0,

// return the widget you wish to hold the value, in this case Text
// if no value set 0, otherwise display the value as a string
displayBuilder: (value, field) {
return Text(
value == null ? "0" : value.toString(),
);
},

// run when the left button is pressed (decrement)
// the current value is passed as a parameter
// return what you want to update the display value to
// when decrement is pressed. In this case if null 0,
// otherwise current value -1
onDecrement: (currentValue) {
return currentValue! - 1;
},

// run when the right button is pressed (increment)
// the current value is passed as a parameter
// return what you want to update the display value to
// when increment is pressed. In this case if null 0,
// otherwise current value +1
onIncrement: (currentValue) {
return currentValue! + 1;
},
),
copied to clipboard
Alphabet increment decrement with error checking (example) #
/*
Alphabet increment decrement with error checking
*/
IncrementDecrementFormField<String>(
// auto validate set, so validates whenever input changes
autovalidateMode: AutovalidateMode.always,

// set an initial value
initialValue: "a",

// show the current char
displayBuilder: (value, field) {
return Text(
value!,
);
},

// decrement current charcode by 1
onDecrement: (currentValue) {
return String.fromCharCode(
currentValue!.codeUnitAt(0) - 1,
);
},

// increment current charcode by 1
onIncrement: (currentValue) {
return String.fromCharCode(
currentValue!.codeUnitAt(0) + 1,
);
},

// error if not between a and z lowercase
validator: (value) {
if (value == null ||
value.length != 1 ||
value.codeUnitAt(0) < "a".codeUnitAt(0) ||
value.codeUnitAt(0) > "z".codeUnitAt(0)) {
return "Value out of bounds";
}
return null;
},
),
copied to clipboard
Increment by 2 decrement by 1 with form and validation valid if between 0 and 10 inclusive (example) #
/*
increment by 2 decrement by 1 with form and validation
valid if between 0 and 10 inclusive
*/
StatefulBuilder(
builder: (context, setState) {
return Form(
key: formKey,
child: Column(
children: [
IncrementDecrementFormField<int>(
// auto validate and set init value
autovalidateMode: AutovalidateMode.always,
initialValue: 0,

// show current value
displayBuilder: (value, field) {
return Text(
value!.toString(),
);
},

// decrement by 1
onDecrement: (currentValue) {
return currentValue! - 1;
},

// increment by 2
onIncrement: (currentValue) {
return currentValue! + 2;
},

// validate if between 0 and 10 inclusive
validator: (value) {
if (value == null || value > 10 || value < 0) {
return "Value out of bounds";
}
return null;
},

// add on saved function to set the holder value
// when the for calls onSaved
onSaved: (value) {
holder = value!;
},
),

// a submit button and display for submitted value
// if successful validation set the holder by calling
// save
ElevatedButton(
onPressed: () {
if (formKey.currentState!.validate()) {
setState(() {
formKey.currentState!.save();
});
}
},
child: const Text(
"Submit",
),
),

// display submitted value
Text(
"Submitted Value: $holder",
),
],
),
);
},
),
copied to clipboard
Config Objects #
The following config objects are used to pass configs to widgets nested within IncrementDecrementFormField

ColumnConfig
ContainerConfig
ErrorFlexibleConfig
ErrorTextConfig
IconButtonConfig
RowConfig

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter