How to create number input field in Flutter?

How to create number input field in Flutter? - Printable Version

+- 0Day Forums (https://0day.red)
+-- Forum: Coding (https://0day.red/Forum-Coding)
+--- Forum: Flutter & Dart (https://0day.red/Forum-Flutter-Dart)
+--- Thread: How to create number input field in Flutter? (/Thread-How-to-create-number-input-field-in-Flutter)

Pages: 1 2 3

How to create number input field in Flutter? - Sirrichly3 - 07-21-2023

I'm unable to find a way to create an input field in Flutter that would open up a numeric keyboard and should take numeric input only. Is this possible with Flutter material widgets? Some GitHub discussions seem to indicate this is a supported feature but I'm unable to find any documentation about it.

RE: How to create number input field in Flutter? - venison953 - 07-21-2023

You can Easily change the Input Type using the [keyboardType][1] Parameter
and you have a lot of possibilities check the documentation [TextInputType][2]
so you can use the number or phone value

new TextField(keyboardType: TextInputType.number)

[1]:

[To see links please register here]

[2]:

[To see links please register here]

RE: How to create number input field in Flutter? - salsify904 - 07-21-2023

Set the keyboard and a validator

String numberValidator(String value) {
if(value == null) {
return null;
}
final n = num.tryParse(value);
if(n == null) {
return '"$value" is not a valid number';
}
return null;
}

new TextFormField(
keyboardType: TextInputType.number,
validator: numberValidator,
textAlign: TextAlign.right
...

-

[To see links please register here]

RE: How to create number input field in Flutter? - bellanca266 - 07-21-2023

You can try this:
```dart
TextFormField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
prefixIcon: Text("Enter your number: ")
),
initialValue: "5",
onSaved: (input) => _value = num.tryParse(input),
),
```

RE: How to create number input field in Flutter? - pluralize428 - 07-21-2023

For those who need to work with **money format** in the text fields:

To use only: , *(comma)* and . *(period)*

and block the symbol: - *(hyphen, minus or dash)*

as well as the: ⌴ *(blank space)*

In your TextField, just set the following code:

keyboardType: TextInputType.numberWithOptions(decimal: true),
inputFormatters: [BlacklistingTextInputFormatter(new RegExp('[\\-|\\ ]'))],

The simbols hyphen and space will still appear in the keyboard, but will become blocked.

RE: How to create number input field in Flutter? - joriyv - 07-21-2023

`keyboardType: TextInputType.number` would open a num pad on focus, I would clear the text field when the user enters/past anything else.

keyboardType: TextInputType.number,
onChanged: (String newVal) {
if(!isNumber(newVal)) {
editingController.clear();
}
}

// Function to validate the number
bool isNumber(String value) {
if(value == null) {
return true;
}
final n = num.tryParse(value);
return n!= null;
}

RE: How to create number input field in Flutter? - timmieyjj - 07-21-2023

Here is code for actual Phone keyboard on Android:

Key part: `keyboardType: TextInputType.phone,`

```dart
TextFormField(
style: TextStyle(
fontSize: 24
),
controller: _phoneNumberController,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
prefixText: "+1 ",
labelText: 'Phone number'),
validator: (String value) {
if (value.isEmpty) {
return 'Phone number (+x xxx-xxx-xxxx)';
}
return null;
},
),
```

RE: How to create number input field in Flutter? - slyviasm492 - 07-21-2023

You can use this two attributes together with TextFormField

TextFormField(
keyboardType: TextInputType.number
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],

It's allow to put only numbers, no thing else ..

[To see links please register here]

RE: How to create number input field in Flutter? - fiftyfifty615 - 07-21-2023

Here is code for numeric keyboard :
**keyboardType: TextInputType.phone** When you add this code in textfield it will open numeric keyboard.

final _mobileFocus = new FocusNode();
final _mobile = TextEditingController();

TextFormField(
controller: _mobile,
focusNode: _mobileFocus,
maxLength: 10,
keyboardType: TextInputType.phone,
decoration: new InputDecoration(
counterText: "",
counterStyle: TextStyle(fontSize: 0),
hintText: "Mobile",
border: InputBorder.none,
hintStyle: TextStyle(
color: Colors.black,
fontSize: 15.0.
),
),
style: new TextStyle(
color: Colors.black,
fontSize: 15.0,
),
);

RE: How to create number input field in Flutter? - daves684 - 07-21-2023

For number input or numeric keyboard you can use keyboardType: TextInputType.number

TextFormField(
decoration: InputDecoration(labelText:'Amount'),
controller: TextEditingController(
),
validator: (value) {
if (value.isEmpty) {
return 'Enter Amount';
}
},
keyboardType: TextInputType.number
)