¿Cómo crear un campo de entrada de números en Flutter?

126

No puedo encontrar una manera de crear un campo de entrada en Flutter que abra un teclado numérico. ¿Es esto posible con los widgets de material de Flutter? Algunas discusiones de github parecen indicar que esta es una función compatible, pero no puedo encontrar ninguna documentación al respecto.

Janne Annala
fuente
agregar tipo de teclado keyboardType: TextInputType.number,
Ishan Fernando

Respuestas:

248

Puede especificar el número como keyboardType para TextField usando:

keyboardType: TextInputType.number

Revisa mi archivo main.dart

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      home: new HomePage(),
      theme: new ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.white,
      body: new Container(
          padding: const EdgeInsets.all(40.0),
          child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new TextField(
            decoration: new InputDecoration(labelText: "Enter your number"),
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
    WhitelistingTextInputFormatter.digitsOnly
], // Only numbers can be entered
          ),
        ],
      )),
    );
  }
}

ingrese la descripción de la imagen aquí

Rissmon Suresh
fuente
3
¡Genial, gracias! Realmente desearía que la documentación del constructor de Flutter no estuviera tan mal formateada. Este completamente perdido.
Janne Annala
8
Pero puedo pegar los Textos (Caracteres) en ese campo, ¿tienes otras opciones? @Rissmon Suresh
Thirumal Govindaraj
5
no te olvides => importar 'paquete: flutter / services.dart';
Wilmer
Permite poner punto, espacio y pegar emoji
agilob
5
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly] también se requiere aquí, ya que la coma y el punto aún se pueden aceptar aquí en la respuesta.
Ravi Yadav
79

Para aquellos que buscan hacer TextFieldo TextFormFieldaceptar solo números como entrada, pruebe este bloque de código:

TextFormField(
    controller: _controller,
    keyboardType: TextInputType.number,
    inputFormatters: <TextInputFormatter>[
        WhitelistingTextInputFormatter.digitsOnly
    ],
    decoration: InputDecoration(
        labelText:"whatever you want", 
        hintText: "whatever you want",
        icon: Icon(Icons.phone_iphone)
    )
)
Bilal Şimşek
fuente
3
Esto es bienvenido para evitar que el usuario pegue cadenas sin dígitos (inputFormatters), gracias.
Mariano Argañaraz
2
Esto también funciona bien incluso en Flutter_web. La razón por la que estamos en flutter_web no podemos imponer un teclado numérico, por lo que la restricción es la opción natural. Gracias @ BilalŞimşek
Abhilash Chandran
1
¡Esta es la solución perfecta!
Kavinda Jayakody
31

A través de esta opción, puede restringir estrictamente otro carácter sin número.

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

Para usar la opción anterior, debe importar este

import 'package:flutter/services.dart';

usando este tipo de opción, el usuario no puede pegar caracteres en un campo de texto

Hardik Kumbhani
fuente
esta es la respuesta completa real. sin los formateadores, simplemente configurar el teclado no es suficiente.
shababhsiddique
si solo quiero decimales y dígitos. ¿Cómo se agrega el "." en la lista blanca de formateador?
shababhsiddique
19

Configurar el teclado y un validador

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
    ...
Günter Zöchbauer
fuente
Error conseguido: la variable num local no puede ser referenciado antes de que se declara
kashlo
Ok, el nombre numde la variable no funciona. Es necesario cambiar el nombre
Günter Zöchbauer
1
De los documentos: el parámetro onError está obsoleto y se eliminará. En lugar de num.parse (string, (string) {...}), debería usar num.tryParse (string) ?? (...).
kashlo
13

Para aquellos que necesitan trabajar con formato de dinero en los campos de texto:

Para usar solo:, (coma) y. (período)

y bloquee el símbolo: - (guión, menos o guión)

así como el: ⌴ (espacio en blanco)

En su TextField, simplemente configure el siguiente código:

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

Los símbolos de guión y espacio seguirán apareciendo en el teclado, pero se bloquearán.

Fellipe Sanches
fuente
¿Sabes cómo permitir solo una coma o un punto?
Heddie Franco
1
@HeddieFranco leyó sobre regex developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…
Fellipe Sanches
2

Puede cambiar fácilmente el tipo de entrada utilizando el parámetro keyboardType y tiene muchas posibilidades consulte la documentación TextInputType para que pueda usar el número o el valor del teléfono

 new TextField(keyboardType: TextInputType.number)
Raouf Rahiche
fuente
2

Puedes probar esto:

TextFormField(
     keyboardType: TextInputType.number,
     decoration: InputDecoration(
              prefixIcon: Text("Enter your number: ")
     ),
     initialValue: "5",
     onSaved: (input) => _value = num.tryParse(input),
),
Hasan A Yousef
fuente
1

keyboardType: TextInputType.number abriría un teclado numérico en el foco, limpiaría el campo de texto cuando el usuario ingrese / pegue cualquier otra cosa.

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;
}
Lahar Shah
fuente
1

Aquí está el código para el teclado del teléfono real en Android:

Parte clave: 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;
    },
  ),
Andrey
fuente
0

Aquí está el código para el teclado numérico: keyboardType: TextInputType.phone Cuando agregue este código en el campo de texto, se abrirá el teclado numérico.

  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,
           ),
          );
Paras Sharma
fuente
¡Bienvenido a Stack Overflow! Incluya al menos un contexto de cómo funciona con el código.
zixuan
0

Para la entrada de números o el teclado numérico, puede usar keyboardType: TextInputType.number

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