quantity_input 1.0.2 icon indicating copy to clipboard operation
quantity_input: ^1.0.2 copied to clipboard

A simple widget to help you handle quantity inputs with formatted value

Quantity Input #

Buy Me A Pizza

A Flutter plugin to handle number inputs with increment and decrement buttons.

Preview #


Usage #

In the pubspec.yaml of your flutter project, add the following dependency:

  quantity_input: ^1.0.2

You can create a simple quantity input widget with the following example:

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

void main() {

class MyApp extends StatefulWidget {
  State<MyHomePage> createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  int simpleIntInput = 0;

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text('Example')
          body: Center(
            child: Column(  
              mainAxisSize: MainAxisSize.min,
              children: [
                  value: simpleIntInput,
                  onChanged: (value) => setState(() => simpleIntInput = int.parse(value.replaceAll(',', '')))
                  'Value: $simpleIntInput',
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold

If the value returned by onChanged has tousand separators, it is recommended to remove the commas from String before parsing as shown in example before.


AttributeTypeRequiredDescriptionDefault value
valueint/double✔️Has to be an int or double depending on QuantityInputType variable
onChangedFunction(String)✔️Detects changes to the input and sends value through param
stepint/doubleThe value that is incremented or decremented each time the user presses a button1
decimalDigitsintThe number of decimal places that can be displayed for double input1
minValueint/doubleSet min value to be displayed in input1
maxValueint/doubleSet max value to be displayed in input100
inputWidthdoubleThe width of the textfield input80
buttonColorColorSets color for increment and decrement buttonsPrimary app color
iconColorColorSets color for icons inside increment and decrement buttonsColors.white
labelStringSets label for input
readOnlyboolDetermines if the input will be readOnlyfalse
acceptsZeroboolIf set to true, the input can accept the value 0false
acceptsNegativesboolIf set to true, the input can accept negative valuesfalse
typeQuantityInputTypeDetermines if the input will manage values as int or doubleQuantityInputType.int
decorationInputDecorationSets custom InputDecoration to the widget TextFormField
elevationdoubleSets elevation to increment and decrement buttons5

Issues & Suggestions #

If you encounter any issue you or want to leave a suggestion you can do it by filling an issue.

Thank you for the support! #

pub points


verified publisher icon4inka.com

A simple widget to help you handle quantity inputs with formatted value

Repository (GitHub)


API reference


Icon for licenses.BSD-3-Clause (LICENSE)


flutter, intl


Packages that depend on quantity_input