Code Monkey home page Code Monkey 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

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.