Giter Club home page Giter Club logo

flutter_quantity_input's Introduction

Quantity Input

Buy Me A Pizza

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

Preview

Preview

Usage

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

dependencies:
  ...
  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() {
  runApp(MyApp());
}

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

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

  @override
  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: [
                QuantityInput(
                  value: simpleIntInput,
                  onChanged: (value) => setState(() => simpleIntInput = int.parse(value.replaceAll(',', '')))
                ),
                Text(
                  '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.

API

Attribute Type Required Description Default value
value int/double ✔️ Has to be an int or double depending on QuantityInputType variable
onChanged Function(String) ✔️ Detects changes to the input and sends value through param
step int/double The value that is incremented or decremented each time the user presses a button 1
decimalDigits int The number of decimal places that can be displayed for double input 1
minValue int/double Set min value to be displayed in input 1
maxValue int/double Set max value to be displayed in input 100
inputWidth double The width of the textfield input 80
buttonColor Color Sets color for increment and decrement buttons Primary app color
iconColor Color Sets color for icons inside increment and decrement buttons Colors.white
label String Sets label for input
readOnly bool Determines if the input will be readOnly false
acceptsZero bool If set to true, the input can accept the value 0 false
acceptsNegatives bool If set to true, the input can accept negative values false
type QuantityInputType Determines if the input will manage values as int or double QuantityInputType.int
decoration InputDecoration Sets custom InputDecoration to the widget TextFormField
elevation double Sets elevation to increment and decrement buttons 5

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!

flutter_quantity_input's People

Contributors

4inka avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar

flutter_quantity_input's Issues

MinValue and MaxValue not working.

I've tried to use this widget like this:
class _MyClassState extends State<MyClass> { @override Widget build(BuildContext context) { return QuantityInput( minValue: 0, maxValue: 5, value: myvalue, onChanged: (value) => setState(() => myvalue = int.parse(value.replaceAll(',', ''))) ); } }

and calling the Myclass from an other class. It works, but the min and max values are not doing anything. I really need the minValue: 0.

please update depends intl to version 0.18.1

Note: intl is pinned to version 0.18.1 by flutter_localizations from the flutter SDK.
See https://dart.dev/go/sdk-version-pinning for details.

Because no versions of quantity_input match >1.0.2 <2.0.0 and quantity_input
1.0.2 depends on intl ^0.17.0, quantity_input ^1.0.2 requires intl ^0.17.0.
And because every version of flutter_localizations from sdk depends on intl
0.18.1, quantity_input ^1.0.2 is incompatible with flutter_localizations from
sdk.
So, because yidunwang depends on both flutter_localizations from sdk and
quantity_input ^1.0.2, version solving failed.�

widget doesnt function

hey, for me the widget does not work at all. if i press the up button, it goes up by one, but then stops working. if i then press the down button, the value decreases by 2 even tho my step size is 1. after that, the down button also doesnt work anymore.

QuantityInput(
  value: 1,
  minValue: 0,
  maxValue: 100,
  acceptsNegatives: true,
  step: 1,
  onChanged: (value) {
    print(value);
  },
)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.