tutorial react examples español curso dart flutter

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



flutter vs react native (7)

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.



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.



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


Puedes probar esto:

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


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


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