Number Picker In Flutter
In this article, we will explore the Number Picker in flutter using the number_picker_package. With the help of the package, we can easily achieve a flutter number picker. So let’s get started.
Table Of Contents :
Flutter :
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time, Flutter offers great developer tools, with amazing hot reload”
Number Picker :
The Numberpicker is a kind of package that allows us to select any number of numbers, using this package allows us to easily select both integer and decimal numbers.
Types of NumberPicker :
There are two types of dialog in the number picker package:
- Integer NumberPicker Dialog — The Integer NumberPicker Dialog is used by the user for any integer number.
- Decimal NumberPicker Dialog — The decimal number picker dialog is used by the user to take any floating point, double or decimal number.
Demo Module :
Implementation :
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies :
dependencies:
numberpicker: ^2.0.1
Step 2: Importing
import 'package:numberpicker/numberpicker.dart';
Step 3: Run flutter package get
Code Implementation :
Create a new dart file called number_picker_demo.dart inside the libfolder.
In this screen, we have defined the Integer Number Picker and Decimal Number Peak inside the Column Widget, in which the selected number of each is also shown below the Number Picker Widget, there is a button that opens a dialog by clicking on it. We can select the number value. Let’s look at it briefly.
In this reference, the NumberPicker.integer type is defined with minValue 0 and maxValue 100.
integerNumberPicker = new NumberPicker.integer(
initialValue: _currentIntValue,
minValue: 0,
maxValue: 100,
step: 10,
onChanged: _handleValueChanged,
);
Now we have created a button to show the value of the Integer type, inside which the NumberPickerDialog.integer dialog is defined. As we press the button a dialog of an integer value will open in which the user can select any number.
Future _showIntegerDialog() async {
await showDialog<int>(
context: context,
builder: (BuildContext context) {
return new NumberPickerDialog.integer(
minValue: 0,
maxValue: 100,
step: 10,
initialIntegerValue: _currentIntValue,
title: new Text("Pick a int value"),
);
},
).then(_handleValueChangedExternally);
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
In this reference, the NumberPicker.decimal type is defined with minValue 0 and maxValue 50.
decimalNumberPicker = new NumberPicker.decimal(
initialValue: _currentDoubleValue,
minValue: 1,
maxValue: 50,
decimalPlaces: 2,
onChanged: _handleValueChanged);
Now we have created a button to show the value of the decimal type, inside which the NumberPickerDialog.decimal dialog is defined. As we press the button a dialog of a decimal value will open in which the user can select any number.
Future _showDoubleDialog() async {
await showDialog<double>(
context: context,
builder: (BuildContext context) {
return new NumberPickerDialog.decimal(
minValue: 1,
maxValue: 5,
decimalPlaces: 2,
initialDoubleValue: _currentDoubleValue,
title: new Text("Pick a decimal value"),
);
},
).then(_handleValueChangedExternally);
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File :
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:numberpicker/numberpicker.dart';
class NumberPickerDemo extends StatefulWidget {
@override
_NumberPickerDemoState createState() => _NumberPickerDemoState();
}
class _NumberPickerDemoState extends State<NumberPickerDemo> {
int _currentIntValue = 10;
double _currentDoubleValue = 3.0;
NumberPicker integerNumberPicker;
NumberPicker decimalNumberPicker;
_handleValueChanged(num value) {
if (value != null) {
if (value is int) {
setState(() => _currentIntValue = value);
} else {
setState(() => _currentDoubleValue = value);
}
}
}
_handleValueChangedExternally(num value) {
if (value != null) {
if (value is int) {
setState(() => _currentIntValue = value);
integerNumberPicker.animateInt(value);
} else {
setState(() => _currentDoubleValue = value);
decimalNumberPicker.animateDecimalAndInteger(value);
}
}
}
@override
Widget build(BuildContext context) {
integerNumberPicker = new NumberPicker.integer(
initialValue: _currentIntValue,
minValue: 0,
maxValue: 100,
step: 10,
onChanged: _handleValueChanged,
);
//build number picker for decimal values
decimalNumberPicker = new NumberPicker.decimal(
initialValue: _currentDoubleValue,
minValue: 1,
maxValue: 5,
decimalPlaces: 2,
onChanged: _handleValueChanged);
//scaffold the full homepage
return new Scaffold(
appBar: new AppBar(
title: new Text('Number Picker Demo'),
centerTitle:true,
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
integerNumberPicker,
RaisedButton(
onPressed: () => _showIntegerDialog(),
child: new Text("Int Value: $_currentIntValue"),
color: Colors.grey[300],
),
decimalNumberPicker,
RaisedButton(
onPressed: () => _showDoubleDialog(),
child: new Text("Decimal Value: $_currentDoubleValue"),
color: Colors.pink[100],
),
],
),
));
}
Future _showIntegerDialog() async {
await showDialog<int>(
context: context,
builder: (BuildContext context) {
return new NumberPickerDialog.integer(
minValue: 0,
maxValue: 100,
step: 10,
initialIntegerValue: _currentIntValue,
title: new Text("Pick a int value"),
);
},
).then(_handleValueChangedExternally);
}
Future _showDoubleDialog() async {
await showDialog<double>(
context: context,
builder: (BuildContext context) {
return new NumberPickerDialog.decimal(
minValue: 1,
maxValue: 5,
decimalPlaces: 2,
initialDoubleValue: _currentDoubleValue,
title: new Text("Pick a decimal value"),
);
},
).then(_handleValueChangedExternally);
}
}
Conclusion :
In this article, I have explained a Number Picker in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Number Picker from our side.
I hope this blog will provide you with sufficient information in Trying up the Number Picker in your flutter project. We will show you the Number Picker is?, and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
