number_inc_dec 0.6.0+2

  • Readme
  • Changelog
  • Example
  • Installing
  • 87

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 #

  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 #

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. Follwing 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 autovalidates 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 OutlinInputBorder 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.
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.
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 Incrment 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 Incrment button.Defaults to size defined in IconTheme
decIconSizedoubleIcon size to be used for Decrment button.Defaults to size defined in IconTheme
onIncrementDiffIncDecCallBackA call back function to be called on successfull increment. This will not be called if the internal validators fail.null
onDecrementDiffIncDecCallBackA call back function to be called on successfulll decrement. This will not be called if the internal validators fail.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

[0.6.0+2] - 24June2020 #

  • Added 5 different preffabed widgets for ease of use and as example.

  • Added scale factors for width and height.

  • Provided more options such as icon size, background color and decoration.

  • Added options for call back on Increment and Decrement

  • Added options for different layouts of the increment decrement buttons.

[0.5.0] - 22May2020. #

  • A initial release of the NumberIncrementDecrement Widget
  • [ ] Expose all options of the TextFormField for more customized control.

  • [ ] Add more prefabbed widgets.

  • [ ] Write golden test cases.

  • [x] Expose call back options

  • [x] Expose more options for Icons.

example/example.md

Example #

In following section you can see several different examples with different configurations.


Default Appearance

NumberInputWithIncrementDecrement(
 controller: TextEditingController(),
);

example1


Setting minimum and maximum values

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

example2


Using double values with fractional incDecFactor=0.35

NumberInputWithIncrementDecrement(
      controller: TextEditingController(),
      isInt: false,
      incDecFactor: 0.35,
    );

example3


Prefabbed Widget with Squared buttons

NumberInputPrefabbed.squaredButtons(
  controller: TextEditingController(),
),

pre_squared


Prefabbed widget with Leaf like Icons

NumberInputPrefabbed.leafyButtons(
  controller: TextEditingController(),
),

pre_leaf


Prefabbed widget directional icons.

NumberInputPrefabbed.directionalButtons(
  controller: TextEditingController(),
),

pre_directional


Prefabbed widget with round endged icons

NumberInputPrefabbed.roundedEdgeButtons(
  controller: TextEditingController(),
),

pre_roundEdge


Prefabbed widget with circular icons in Pink color

NumberInputPrefabbed.roundedButtons(
   controller: TextEditingController(),
   incDecBgColor: Colors.pink,
),

pre_rounded


With initial Value as 5

NumberInputWithIncrementDecrement(
  controller: TextEditingController(),
  initialValue: 5,
);

example4


Different border decoration

    NumberInputWithIncrementDecrement(
      controller: TextEditingController(),
      widgetContainerDecoration: BoxDecoration(
        border: Border.all(
          color: Colors.pink,
        ),
      ),
    );

example5


Different icons & formfield decoration

    NumberInputWithIncrementDecrement(
      controller: TextEditingController(),
      numberFieldDecoration: InputDecoration(
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(5.0),
          borderSide: BorderSide(color: Colors.orange, width: 2.0),
        ),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(5.0),
        ),
      ),
      incIcon: Icons.plus_one,
      decIcon: Icons.exposure_neg_1,
    );

example6


Height scaled to 0.75

    NumberInputWithIncrementDecrement(
      controller: TextEditingController(),
      scaleHeight: 0.75,
      incIcon: Icons.plus_one,
      decIcon: Icons.exposure_neg_1,
    );

example7


Width scaled to 0.75

    NumberInputWithIncrementDecrement(
      controller: TextEditingController(),
      scaleWidth: 0.75,
      incIcon: Icons.plus_one,
      decIcon: Icons.exposure_neg_1,
    );

example8


Highly Customized widget, Icon shape and size.

    NumberInputWithIncrementDecrement(
      controller: TextEditingController(),
      numberFieldDecoration: InputDecoration(
        border: InputBorder.none,
      ),
      widgetContainerDecoration: BoxDecoration(
        borderRadius: BorderRadius.all(
          Radius.circular(10)
        ),
        border: Border.all(
          color: Colors.amber,
          width: 2,
        )
      ),
      incIconDecoration: BoxDecoration(
        color: Colors.amber,
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(10),
        ),
      ),
      separateIcons: true,
      decIconDecoration: BoxDecoration(
        color: Colors.amber,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10),
        ),
      ),
      incIconSize: 28,
      decIconSize: 28,
      incIcon: Icons.plus_one,
      decIcon: Icons.exposure_neg_1,
    );

example9


Demo #

Full demo with different options being used for this widget.

import 'package:flutter/material.dart';
import 'package:number_inc_dec/number_inc_dec.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        textTheme: Theme.of(context).textTheme.apply(
              fontSizeFactor: 1.1,
              fontSizeDelta: 2.0,
            ),
      ),
      home: SafeArea(
        child: Scaffold(
          body: Center(
            child: ListView(
              padding: EdgeInsets.all(12),
              // mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Default appearance'),
                Example1(),
                Text('Setting minimum value -2 and maximum value 3'),
                Example2(),
                Divider(),
                Text('Using double values with incDecFator=0.35'),
                Example3(),
                Text('Prefabbed widget: Squared Buttons'),
                NumberInputPrefabbed.squaredButtons(
                  controller: TextEditingController(),
                ),
                Text('Prefabbed widget: Leafy Icons'),
                NumberInputPrefabbed.leafyButtons(
                  controller: TextEditingController(),
                ),
                Text('Prefabbed widget: Directional Icons'),
                NumberInputPrefabbed.directionalButtons(
                  controller: TextEditingController(),
                ),
                Text('Prefabbed widget: RoundEdged Icons'),
                NumberInputPrefabbed.roundedEdgeButtons(
                  controller: TextEditingController(),
                ),
                Text('Prefabbed widget: Rounded Icons'),
                NumberInputPrefabbed.roundedButtons(
                  controller: TextEditingController(),
                  incDecBgColor: Colors.pink,
                ),
                Text('With initial Value as 5'),
                Example4(),
                Text('Different border decoration'),
                Example5(),
                Text('Different icons & formfield decoration'),
                Example6(),
                Text('Height scaled to 0.75'),
                Example7(),
                Text('Width scaled to 0.75'),
                Example8(),
                Text('Customized Icon shape and size.'),
                Example9(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class Example9 extends StatelessWidget {
  const Example9({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return NumberInputWithIncrementDecrement(
      controller: TextEditingController(),
      numberFieldDecoration: InputDecoration(
        border: InputBorder.none,
      ),
      widgetContainerDecoration: BoxDecoration(
        borderRadius: BorderRadius.all(
          Radius.circular(10)
        ),
        border: Border.all(
          color: Colors.amber,
          width: 2,
        )
      ),
      incIconDecoration: BoxDecoration(
        color: Colors.amber,
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(10),
        ),
      ),
      separateIcons: true,
      decIconDecoration: BoxDecoration(
        color: Colors.amber,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10),
        ),
      ),
      incIconSize: 28,
      decIconSize: 28,
      incIcon: Icons.plus_one,
      decIcon: Icons.exposure_neg_1,
    );
  }
}

class Example7 extends StatelessWidget {
  const Example7({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return NumberInputWithIncrementDecrement(
      controller: TextEditingController(),
      scaleHeight: 0.75,
      incIcon: Icons.plus_one,
      decIcon: Icons.exposure_neg_1,
    );
  }
}

class Example8 extends StatelessWidget {
  const Example8({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return NumberInputWithIncrementDecrement(
      controller: TextEditingController(),
      scaleWidth: 0.75,
      incIcon: Icons.plus_one,
      decIcon: Icons.exposure_neg_1,
    );
  }
}

class Example6 extends StatelessWidget {
  const Example6({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return NumberInputWithIncrementDecrement(
      controller: TextEditingController(),
      numberFieldDecoration: InputDecoration(
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(5.0),
          borderSide: BorderSide(color: Colors.orange, width: 2.0),
        ),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(5.0),
        ),
      ),
      incIcon: Icons.plus_one,
      decIcon: Icons.exposure_neg_1,
    );
  }
}

class Example5 extends StatelessWidget {
  const Example5({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return NumberInputWithIncrementDecrement(
      controller: TextEditingController(),
      widgetContainerDecoration: BoxDecoration(
        border: Border.all(
          color: Colors.pink,
        ),
      ),
    );
  }
}

class Example4 extends StatelessWidget {
  const Example4({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return NumberInputWithIncrementDecrement(
      controller: TextEditingController(),
      initialValue: 5,
    );
  }
}

class Example3 extends StatelessWidget {
  const Example3({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return NumberInputWithIncrementDecrement(
      controller: TextEditingController(),
      isInt: false,
      incDecFactor: 0.35,
    );
  }
}

class Example2 extends StatelessWidget {
  const Example2({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return NumberInputWithIncrementDecrement(
      controller: TextEditingController(),
      min: -2,
      max: 3,
    );
  }
}
sWidget {
  const Example1({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return NumberInputWithIncrementDecrement(
      controller: TextEditingController(),
    );
  }
}

demo

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  number_inc_dec: ^0.6.0+2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:number_inc_dec/number_inc_dec.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
75
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
87
Learn more about scoring.

We analyzed this package on Jul 10, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • number_inc_dec that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test