number_inc_dec 0.6.6

Flutter Android iOS web

A flutter widget which accepts numeric values with buttons to increment and decrement.

Build,Test Publish pub package codecov

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 incrementing/decrementing is also configurable.

Please check the example section which provides granular examples for each options.

If you like this package give it a thumbs-up ūüĎć.

Getting Started #

  1. Install the latest version of the package by adding it to pubspec.yaml as noted in the install page.

  2. Import the number_inc_dec.dart as follows import 'package:number_inc_dec/number_inc_dec.dart';.

  3. Utilize the NumberIncrementDecrement as usual like any other flutter widget.

    • e.g.

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

Demo with different options #

Check the examples sections for the corresponding code snippets.

demo

Configurable options #

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

PropertyTypePurposeDefault Value
controllerTextEditingControllerA 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.
buttonArrangementButtonArrangementDecides the layout of the increment/decrement buttons. Following values are possible.<br/>1. leftEnd<br/>2. rightEnd<br/>3. incLeftDecRight<br/>4.incRightDecLeft<br/>ButtonArrangement.rightEnd
autovalidateboolThis is passed down to the TextFormField. It auto-validates the field with the provided validators. Check TextFormField documentation for more details.false
minnumMinimum 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
maxnumMaximum 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
incDecFactornumFactor by which the increment or decrement should happen. e.g. setting it 0.5 increments/decrements the field value by 0.5.1
initialValuenumAn initial value to be set to the field.0
isIntboolA flag to indicate if the field only accepts integer values. To use double values set this field to false.true
numberFieldDecorationInputDecorationThis decoration will be used by the TextFormField to handle its decoration.An InputDecoration with an OutlineInputBorder to create a circular border.
widgetContainerDecorationDecorationThis is the decoration for the Container that wraps this widget.A simple BoxDecoration with a circular border in Colors.bluegrey color.
enableboolPassed down to the enable attribute of TextFormFieldtrue
validatorFormFieldValidatorA 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.
styleTextStylePassed down to the style attribute of TextFormFieldnull
fractionDigitsintThe number of digits after the decimal point. Used only if isInt is false.2
incIconIconDataThe icon to be used for the increment button.Icons.arrow_drop_up
decIconIconDataThe icon to be used for the decrement button.Icons.arrow_drop_down
incIconDecorationDecorationDecoration for the Increment IconDefaults to a black border in the bottom  and/or top depending on the buttonArrangement.
decIconDecorationDecorationDecoration for the decrement IconDefaults to a black border in the bottom  and/or top depending on the buttonArrangement.
incIconColorColorIcon color to be used for Increment button.Defaults to color defined in IconTheme
decIconColorColorIcon color to be used for Decrement button.Defaults to color defined in IconTheme
incIconSizedoubleIcon size to be used for Increment button.Defaults to size defined in IconTheme
decIconSizedoubleIcon size to be used for Decrement button.Defaults to size defined in IconTheme
onIncrementDiffIncDecCallBackA call back function to be called on successful increment. This will not be called if the internal validators fail.null
onDecrementDiffIncDecCallBackA call back function to be called on successful decrement. This will not be called if the internal validators fail.null
onSubmittedValueCallBackA call back function to be called on completion of text editing of the value. This will not be called if the internal validators fail. If a value is entered that is out of the range min to max it is corrected to be equal to either min or max - depending on which side of the range was exceeded.null
scaleWidthdoubleA scaling factor for the width of the widget.1.0
scaleHeightdoubleA scaling factor for the height of the widget.1.0
separateIconsboolShow a transparent separator between the increment & decrement buttons.false
incDecBgColorColorBackground color of the increment decrement button.<br/>This is set to Colors.lightGreen for all the NumberInputPrefabbed widgets to capture users attention.widget tonull
5
likes
100
pub points
85%
popularity

Publisher

abhilash-chandran.com

A flutter widget which accepts numeric values with buttons to increment and decrement.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on number_inc_dec