Solución:
Si haces un
Form
donde necesite guardar, restablecer o validar operaciones, useTextFormField
. Else For Simple captura de entrada de usuario
TextField
es suficiente.
TextFormField
, que se integra con el Form
widget.
Este es un widget de conveniencia que envuelve un widget TextField en un FormField.
A Form
ancestro no es necesario. El formulario simplemente hace que sea más fácil guardar, restablecer o validar varios campos a la vez.
Para usar sin un formulario, pase una GlobalKey al constructor y use GlobalKey.currentState para guardar o restablecer el campo del formulario.
muestra:
TextFormField(
autovalidateMode: AutovalidateMode.always
decoration: const InputDecoration(
icon: Icon(Icons.person),
hintText: 'What do people call you?',
labelText: 'Name *',
),
onSaved: (String value) {
// This optional block of code can be used to run
// code when the user saves the form.
},
validator: (String value) {
return value.contains('@') ? 'Do not use the @ char.' : null;
},
)
TextField
, que es el campo de texto subyacente sin el Form
integración.
El campo de texto llama al onChanged
devolución de llamada cada vez que el usuario cambia el texto en el campo. Si el usuario indica que ha terminado de escribir en el campo (por ejemplo, presionando un botón en el teclado virtual), el campo de texto llama al onSubmitted
llamar de vuelta.
Respuesta corta
Si no sabe lo que necesita, utilice un TextField
. Este es el widget de Flutter más básico para obtener entrada de texto de un usuario. Es el que debes dominar primero.
Campo de texto
Usando un TextField
es una forma sencilla de permitir la entrada del usuario.
TextField(
decoration: InputDecoration(
hintText: 'Name'
),
);
Para obtener el texto que ingresó el usuario, puede recibir una notificación cada vez que haya un cambio como este:
TextField(
decoration: InputDecoration(
hintText: 'Name'
),
onChanged: (text) {
// do something with text
},
),
O puedes usar un TextEditingController
, como se describe aquí. Esto le dará acceso al estado del texto.
TextFormField
Si necesita validar la entrada de texto del usuario antes de guardarlo, podría considerar usar un TextFormField
. Imagina algo como esto:
Hay muchas comprobaciones de validación que es posible que desee realizar en un nombre de usuario y contraseña.
Por supuesto, aún podría usar un par de TextFields, pero TextFormField
tiene una funcionalidad adicional incorporada que le facilitará la vida. Generalmente, solo usará un TextFormField
cuando lo usa dentro de un Form
widget (aunque ese no es un requisito estricto).
Aquí hay un ejemplo simplificado de la documentación:
class MyCustomForm extends StatefulWidget {
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
class MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
validator: (value) {
// validation logic
},
),
RaisedButton(
child: Text('Submit'),
onPressed: () {
if (_formKey.currentState.validate()) {
// text in form is valid
}
},
),
],
),
);
}
}
Ver también
- Formas realistas en Flutter – Parte 1
- Formas con Flutter
TextField
es un campo de texto simple. (no te importa la entrada del usuario)
TextFormField
es un campo de texto que se utilizará en un formulario (le importa la entrada del usuario).
Si no necesita validar TextField
. Si necesita validar la entrada del usuario, use TextFormField con validator
.