number_inc_dec

A flutter widget that accepts numbers along with buttons to increment and decrement. This is a simple TextFormField with buttons and logic to handle factored increments/decrements and with some additional properties like minimum and maximum allowed value. The factor of incrments is also configurable.

Getting Started

Install the latest version of the package by adding it to pubspec.yaml as noted in the install page.
Import the number_inc_dec.dart as follows import 'package:number_inc_dec/number_inc_dec.dart';.

Utilize the NumberIncrementDecrement as usual like any other flutter widget.

e.g.

NumberInputWithIncrementDecrement(
   controller: TextEditingController(),
   min: -3,
   max: 3,
),

Demo

demo

Configurable options

NumberInputWithIncrementDecrementwidget comes with some configurable options. The same configurations are application for NumberInputPrefabbed widgets.

Property	Type	Purpose	Default Value
`controller`	`TextEditingController`	A mandatory text editing controller to be used by the TextFormField.	This is a mandatory field because its the easiest way to access the field's value, when not using a Form widget.
`buttonArrangement`	`ButtonArrangement`	Decides the layout of the increment/decrement buttons. Follwing values are possible.<br/>1. leftEnd<br/>2. rightEnd<br/>3. incLeftDecRight<br/>4.incRightDecLeft<br/>	`ButtonArrangement.rightEnd`
`autovalidate`	`bool`	This is passed down to the TextFormField. It autovalidates the field with the provided validators. Check TextFormField documentation for more details.	`false`
`min`	`num`	Minimum acceptable value for this numeric field. Note: No error message will be shown. To show error a `validator` can be used and the widget should wrapped in `Form` widget.	`0`
`max`	`num`	Maximum acceptable value for this numeric field. Note: No error message will be shown. To show error a `validator` can be used and the widget should wrapped in `Form` widget.	`double.infinity`
`incDecFactor`	`num`	Factor by which the increment or decrement should happen. e.g. setting it 0.5 increments/decrements the field value by 0.5.	`1`
`initialValue`	`num`	An initial value to be set to the field.	`0`
`isInt`	`bool`	A flag to indicate if the field only accepts integer values. To use double values set this field to false.	`true`
`numberFieldDecoration`	`InputDecoration`	This decoration will be used by the TextFormField to handle its decoration.	An `InputDecoration` with an `OutlinInputBorder` to create a circular border.
`widgetContainerDecoration`	`Decoration`	This is the decoration for the `Container` that wraps this widget.	A simple `BoxDecoration` with a circular border in `Colors.bluegrey` color.
`validator`	`FormFieldValidator`	A validator function which accepts a string and performs some validation. This is called when this field is wrapped inside a `Form` widget and called during its validate cycle. The error message to be shown should be returned form this method.	A min max validator. Refer the API documentation for more details.
`fractionDigits`	`int`	The number of digits after the decimal point. Used only if `isInt` is `false`.	`2`
`incIcon`	`IconData`	The icon to be used for the increment button.	Icons.arrow_drop_up
`decIcon`	`IconData`	The icon to be used for the decrement button.	Icons.arrow_drop_down
`incIconDecoration`	`Decoration`	Decoration for the Increment Icon	Defaults to a black border in the bottom and/or top depending on the `buttonArrangement`.
`decIconDecoration`	`Decoration`	Decoration for the decrement Icon	Defaults to a black border in the bottom and/or top depending on the `buttonArrangement`.
`incIconColor`	`Color`	Icon color to be used for Incrment button.	Defaults to color defined in `IconTheme`
`decIconColor`	`Color`	Icon color to be used for Decrement button.	Defaults to color defined in `IconTheme`
`incIconSize`	`double`	Icon size to be used for Incrment button.	Defaults to size defined in IconTheme
`decIconSize`	`double`	Icon size to be used for Decrment button.	Defaults to size defined in IconTheme
`onIncrement`	`DiffIncDecCallBack`	A call back function to be called on successfull increment. This will not be called if the internal validators fail.	`null`
`onDecrement`	`DiffIncDecCallBack`	A call back function to be called on successfulll decrement. This will not be called if the internal validators fail.	`null`
`scaleWidth`	`double`	A scaling factor for the width of the widget.	`1.0`
`scaleHeight`	`double`	A scaling factor for the height of the widget.	`1.0`
`separateIcons`	`bool`	Show a transparent separator between the increment & decrement buttons.	false
`incDecBgColor`	`Color`	Background color of the increment decrement button.<br/>This is set to `Colors.lightGreen` for all the `NumberInputPrefabbed` widgets to capture users attention.	widget to`null`

number_inc_dec package

number_inc_dec

Getting Started

Demo

Configurable options

Libraries