¿Cómo crear un campo de entrada de números en Flutter?
No puedo encontrar una manera de crear un campo de entrada en Flutter que abra un teclado numérico y solo acepte entradas numéricas. ¿Es esto posible con los widgets de material de Flutter? Algunas discusiones de GitHub parecen indicar que esta es una característica compatible, pero no puedo encontrar ninguna documentación al respecto.
Puede especificar el número como tipo de teclado para TextField usando:
keyboardType: TextInputType.number
Revisa mi archivo main.dart
import 'package:flutter/material.dart';
import 'package:flutter/services.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>[
FilteringTextInputFormatter.digitsOnly
], // Only numbers can be entered
),
],
),
),
);
}
}
Para aquellos que buscan crear TextFieldo TextFormFieldaceptar solo números como entrada, pruebe este bloque de código:
para flutter 1.20 o versiones más recientes
TextFormField(
controller: _controller,
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
// for below version 2 use this
FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
// for version 2 and greater youcan also use this
FilteringTextInputFormatter.digitsOnly
],
decoration: InputDecoration(
labelText: "whatever you want",
hintText: "whatever you want",
icon: Icon(Icons.phone_iphone)
)
)
para versiones anteriores de 1.20
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)
)
)
Nota: Es necesario importar services.dartcuando se utilizaFilteringTextInputFormatter
import 'package:flutter/services.dart';
A través de esta opción puedes restringir estrictamente otro personaje sin número.
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
keyboardType: TextInputType.number,
Para usar la opción anterior tienes que importar esto
import 'package:flutter/services.dart';
Al usar este tipo de opción, el usuario no puede pegar caracteres en un campo de texto.
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
...
- https://docs.flutter.io/flutter/material/TextFormField/TextFormField.html
- https://docs.flutter.io/flutter/services/TextInputType-class.html
