dart - react - ¿Cómo crear un campo de entrada de número en Flutter?

flutter vs react native

Question

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.

Answer 1

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

• https://docs.flutter.io/flutter/material/TextFormField/TextFormField.html
• https://docs.flutter.io/flutter/services/TextInputType-class.html

Answer 2

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

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

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

así como el: ⌴ (espacio en blanco)

En tu TextField, simplemente establece el siguiente código:

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

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

Answer 3

Puede cambiar fácilmente el tipo de entrada usando el parámetro de tipo de keyboardType y tiene muchas posibilidades; consulte la documentación https://docs.flutter.io/flutter/services/TextInputType-class.html para poder usar el número o el valor del teléfono

 new TextField(keyboardType: TextInputType.number)

Answer 4

Puede especificar el número como keyboardType para el 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,
),
],
)),
);
}
}

Answer 5

Puedes probar esto:

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

Answer 6

para aquellos que buscan hacer que TextField o TextFormField acepten solo números. Prueba 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))
)

Answer 7

keyboardType: TextInputType.number abriría un teclado numérico al enfocar, borraría el campo de texto cuando el usuario ingrese / pase 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;
}