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:
Dart
import 'package:flutter/material.dart' ;
import 'package:input_quantity/input_quantity.dart' ;
void main() {
runApp(RunMyApp());
}
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),
home: Scaffold(
appBar: AppBar(
title: Text( 'Input Quantity' ),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InputQty(
iconColor: Colors.green,
maxVal: double .maxFinite,
initVal: 0,
onQtyChanged: (val) {
},
),
],
),
),
),
);
}
}
|
Explanation:
- The main method is the principal method called once the program is loaded.
- Once the program is loaded runApp will run and call the class that we created RunMyApp to be run.
- This class is a stateful widget to detect the RunMyApp state.
- Creating a MaterialApp that allows us to use Scaffold.
- The scaffold allows us to use the appBar and body.
- The appBar has a simple title.
- The body contains a centered Column.
- A Column allows us to have multiple children that are children with mainAxisAlignment to center.
- The column has one child, InputQty.
- InputQty takes the parameters like iconcolor, maxval,initval, and required parameter ontQtyChanged.
Output:
Last Updated :
13 Oct, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...