Open In App

Input Quantity in Flutter

A Flutter widget for quantity input. Increase or decrease the input value by pressing the button. Built with a text field, InputQty also supports typing input quantity manually. The input value will automatically return to the preset maximum/minimum value. The cursor will automatically move to the right side after typing.

Parameters

Color iconColor = Colors.blueGrey,
double initVal = 0,
required void Function(double?) onQtyChanged,
double maxVal = double.maxFinite,
double minVal = 0,
double steps = 1,

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.



Step 2: Import the Package in the pubspec.yaml file.

Now we need to import the package into the pubspec.yaml file, which you find at the last of the root folder.

From the command line:

flutter pub add input_quantity

This will add something like that to your pubspec.yaml file:



 

Don’t forget to get the packages.

Note:  when you are adding the dependency, version of plugin may changed.

Step 3: Import the Plugin into the main.dart file

import 'package:input_quantity/input_quantity.dart';

Code Example:




import 'package:flutter/material.dart';
import 'package:input_quantity/input_quantity.dart';
  
void main() {
  runApp(RunMyApp()); //runapp runs the main app
}
  
class RunMyApp extends StatefulWidget {
  const RunMyApp({super.key});
  @override
  State<RunMyApp> createState() => _RunMyAppState();
}
  
class _RunMyAppState extends State<RunMyApp> {
    
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Input Quantity',
      theme: ThemeData(primarySwatch: Colors.green), //theme of the app
      home: Scaffold(
        appBar: AppBar( //appbar with title
          title: Text('Input Quantity'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              InputQty(
                iconColor: Colors.green, //color of the increase and decrease icon
                maxVal: double.maxFinite, //max val to go
                initVal: 0,  //min starting val
                onQtyChanged: (val) { //on value changed we may set the value
                  //setstate could be called
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Explanation:

Output:


Article Tags :