Crear y dar estilo a un campo de texto

Los campos de texto permiten a los usuarios escribir texto en una aplicación. Se utilizan para crear formularios, enviar mensajes, crear experiencias de búsqueda y más. En esta receta, explora cómo crear y dar estilo a los campos de texto.

Flutter proporciona dos campos de texto: TextField y TextFormField.

TextField es el Widget de entrada de texto más utilizado.

Por defecto, un TextField está decorado con un subrayado. Puedes añadir una etiqueta (label), un icono, un texto de pista en línea (hint text) y un texto de error asignando un InputDecoration como la propiedad decoration del TextField. Para eliminar la decoración por completo (incluido el subrayado y el espacio reservado para la etiqueta), establece decoration en null.

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    hintText: 'Enter a search term',
  ),
),

Para recuperar el valor cuando cambie, consulta la receta Manejar cambios en un campo de texto.

TextFormField envuelve un TextField y lo integra con el Form contenedor. Esto proporciona funcionalidad adicional, como la validación y la integración con otros Widgets FormField.

TextFormField(
  decoration: const InputDecoration(
    border: UnderlineInputBorder(),
    labelText: 'Enter your username',
  ),
),

Para obtener más información sobre la validación de entradas, consulta la receta Crear un formulario con validación.