How to create number input field in Flutter?

Question

I\'m unable to find a way to create an input field in Flutter that would open up a numeric keyboard. Is this possible with Flutter material widgets? Some github discussions

Answer 1

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 ..

https://api.flutter.dev/flutter/services/TextInputFormatter-class.html

Answer 2

You can use Form Builder Package to display any type of form field. For number input field,

FormBuilderTextField(
     keyboardType: TextInputType.number,
     validators: [
          FormBuilderValidators.numeric(),
     ],
),

Answer 3

Through this option you can strictly restricted another char with out number.

 inputFormatters: [FilteringTextInputFormatter.digitsOnly],
 keyboardType: TextInputType.number,

For using above option you have to import this

import 'package:flutter/services.dart';

using this kind of option user can not paste char in a textfield

Answer 4

If you need to use a double number:

keyboardType: TextInputType.numberWithOptions(decimal: true),
inputFormatters: [FilteringTextInputFormatter.allow(RegExp('[0-9.,]')),],
onChanged: (value) => doubleVar = double.parse(value),

RegExp('[0-9.,]') allows for digits between 0 and 9, also comma and dot.

double.parse() converts from string to double.

Don't forget you need: import 'package:flutter/services.dart';

Answer 5

Here is code for actual Phone keyboard on Android:

Key part: keyboardType: TextInputType.phone,

  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;
    },
  ),

Answer 6

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
)