Flutter TextField Una Vista Detallada

Un tutorial al poder de los TextFields en Flutter

Articulo original escrito por Deven Joshi traducido por Rurick Maqueo

Nota: esta es una traducción integra del articulo original, es posible que algunos links enlacen a paginas en ingles y los enunciados que hablen en primera persona hagan referencia a Deven no a mi.

Este es el segundo articulo de una serie que explicara en detalle algunos de los widgets que ofrece Flutter junto con algunos trucos y consejos para estos. En el articulo anterior exploramos los ListView a detalle. En este articulo no adentraremos comprensivamente en el widget TextField de Flutter y sacaremos sus funciones y posibles personalizaciones de éste.

Introducción al TextField

Un widget TextField permite recopilar de información del usuario. El código para un TextField básico es tan simple como esto:

TextField()

Esto crea un TextField basico:

Recobrando información de un TextField

Ya que el TextField no tiene un ID como en Android, el texto no puede ser recuperado sobre demanda, en su lugar debe ser guardado en una variable al ser cambiado o usar un controlador.

1. La forma mas fácil de hacerlo es usando el método onChanged y guardar el valor actual en una simple variable. Aquí hay un código de ejemplo para eso:

String valor = "";
TextField(
  onChanged: (texto) {
    valor = texto;
  },
)

2. La segunda forma de hacer esto es usando un TextEditingController. El controlador está unido al TextField y nos permite escuchar y controlar el texto del TextField.

TextEditingController controlador = TextEditingController();
TextField(
  controller: controlador,
)

Podemos escuchar los cambios usando:

controlador.addListener(() {
  // Haz algo aqui
});

Y obtener o establecer valores usando:

print(controlador.text); // Imprime el valor actual
controlador.text = "Texto Prueba"; // Establece nuevo valor

Otras funciones del TextField

El widget TextField también provee otras funciones como:

1. onEditingCompleted

onEditingComplete: () {},

1. onSubmitted

onSubmitted: (valor) {},

Estas funciones son ejecutadas en acciones como cuando el usuario da click en el botón “Hecho” de iOS

Trabajando con enfoque en TextFields

Tener “enfocado” un TextField significa que tienes un TextField activo y cualquier entrada del teclado resultara en datos entrantes en el TextField enfocado.

1. Trabajando con autenfocado (autofocus)

Para autoenfocar un TextField cuando un widget es creado, establece el campo autofocus a verdadero (true)

TextField(
  autofocus: true,
),

Esto establece el enfoque en el TextField por defecto.

El enfoque cambia al TextField por defecto

2. Trabajando con cambios de enfoque personalizados

¿Qué tal si quisiéramos cambiar el enfoque bajo demanda y no solo auto enfocar? Ya que necesitamos una manera de identificar a cual TextField queremos enfocarnos a continuación, debemos agregar un FocusNode al TextField y usarlo para cambiar el enfoque.

// Iniciarlos fuera del método build
FocusNode nodeUno = FocusNode();
FocusNode nodeDos = FocusNode();
// Haz esto dentro del método build
TextField(
  focusNode: nodeUno,
),
TextField(
  focusNode: nodeDos,
),
RaisedButton(
  onPressed: () {
    FocusScope.of(context).requestFocus(nodeDos);
  },
  child: Text("Siguiente Campo"),
),

Creamos dos FocusNode y los unimos a los TextFields. Cuando el botón es presionado, usamos FocusScope para mover el enfoque al siguiente TextField.

El enfoque cambia cuando el botón es presionado

Cambiando las propiedades del teclado para los TextFields

Un TextField en Flutter también te permite personalizar las propiedades relacionadas al teclado.

1. Tipo de teclado

Un TextField te permite personalizar el tipo de teclado que se mostrara cuando el TextField es enfocado. Podemos cambiar la propiedad keyboardType de este.

TextField(
  keyboardType: TextInputType.number, //Mostrara teclado numérico
),

Los tipos son:

1. TextInputType.text (Teclado normal completo)
2. TextInputType.number (Teclado numérico)
3. TextInputType.emailAddress (Teclado normal con una tecla “@”)
4. TextInputType.datetime (Teclado numérico con “/” y “:”)
5. TextInputType.numberWithOptions (Teclado numérico con opciones para habilitar el signo y decimales)
6. TextInputType.multiline (Optimizado para información multi linea)

2. TextInputAction

Cambiar la textInputAction del TextField te permite cambiar el Action Button del teclado mismo.

Un ejemplo:

TextField(
  textInputAction: TextInputAction.continueAction,
),

Esto causa que el botón “Done” (Hecho) sea remplazado por el botón “Continue” (Continuar):

O

TextField(
  textInputAction: TextInputAction.send,
),

Causa:

La lista completa es demasiado larga para mostrarla aquí, pero asegúrate de revisarla por tu cuenta.

https://api.flutter.dev/flutter/services/TextInputAction-class.html

Habilita o des habilita el auto corrector para un TextField especifico. Usa el parámetro autocorrect para esto:

TextField(
  autocorrect: false,
),

Esto des habilitara las sugerencias también.

4. Capitalización del texto (uso de mayusculas)

Los TextField proveen algunas opciones en como capitalizar letras en la entrada del usuario.

TextField(
  textCapitalization: TextCapitalization.sentences,
),

Los tipos son:

1. TextCapitalization.sentences

Este es el tipo normal de capitalización, la primera letra de cada oración es capitalizada.

2. TextCapitalization.characters

Capitaliza todas las letras en las oraciones.

3. TextCapitalization.words

Capitaliza la primera letra de cada palabra.

Estilo de Texto, alineamiento y opciones del cursor.

Flutter nos permite personalizar el estilo y alineamiento del texto dentro de un TextField junto con su cursor.

Alineamiento del texto dentro del TextField

Usa la propiedad textAlign para ajustar donde estará el cursor dentro del TextField:

TextField(
  textAlign: TextAlign.center,
),

Esto causa que el cursor y el texto inicien en el centro del TextField.

Este tiene las propiedades comunes de alineado: start (inicio), end (final), left (izquierda), right (derecha), center (centrado), justify (justificado).

Estilizando el texto dentro del TextField

Usamos la propiedad style para cambiar como se verá el texto dentro del TextField. Usalo para cambiar el color, tamaño de fuente, etc. Este es similar a la propiedad style en un Text Widget así que no pasaremos mucho tiempo revisándola.

TextField(
  style: TextStyle(color: Colors.red, fontWeight: FontWeight.w300),
),

Cambiando el cursor en el TextField

El cursor es personalizable directamente desde el TextField.

Tiene permitido cambiar el color del cursor, el ancho y el radio de las esquinas. Por ejemplo, aquí hago un cursor circular rojo sin razón aparente.

TextField(
  cursorColor: Colors.red,
  cursorRadius: Radius.circular(16.0),
  cursorWidth: 16.0,
),

Controlando el tamaño y longitud maxima de un TextField

Los TextFields pueden controlar el numero máximo de letras escritas dentro de ellos, el numero máximo de lineas y pueden expandirse conforme se va escribiendo texto.

Controlando el máximo de letras

TextField(
  maxLength: 4,
),

Al establecer la propiedad maxLength, se fuerza un limite de letras y un contador se agrega por defecto al TextField

Haciendo un TextField expandible

Algunas veces necesitamos un TextField que se expanda cuando una linea es terminada. En Flutter esto es un poco extraño (pero fácil) de hacer. Para conseguirlo, tenemos que establecer la propiedad maxLines a null (es uno por defecto). Poner la propiedad en null no es algo a lo que estemos acostumbrados pero sin embargo es fácil de hacer.

Nota: establecer el maxLines a un valor directamente expandirá el TextField a ese numero de lineas por defecto.

TextField(
  maxLines: 3,
)

Ocultando Texto

Para ocultar texto en un TextField, establece la propiedad obscureText a true

TextField(
  obscureText: true,
),

Y finalmente, decorando el TextField

Hasta ahora nos hemos enfocado en las características que ofrece flutter para las entradas. Ahora nos moveremos a diseñar un TextField elegante y no decir que no a nuestro diseñador.

Para decorar un TextField usamos la propiedad decoration, que toma un InputDecoration. Ya que la clase InputDecoration es enorme trataremos de cubrir rápidamente las propiedades mas importantes.

Usando hint (indicio) y label (etiqueta) para dar informacion al usuario

Ambos, hint y label, son cadenas que ayudan al usuario a entender la información que debe ingresar en el TextField. La diferencia es que un hint desaparece cuando el usuario empieza a escribir y la label flota sobre el TextField

Hint (indicio)

Label (etiqueta)

Puedes agregar iconos usando “icon”, “prefixIcon” y “suffixIcon”

Puedes agregar iconos directamente a los TextField. También puedes usar prefixText y suffixText para texto en su lugar.

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.print)
  ),
),

Icono usando la propiedad icon

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.print)
  ),
),

Icono usando la propiedad prefixIcon

Similar a cualquier otro widget, usa “prefix” en lugar de “prefixIcon”

Para usar un widget genérico en lugar de un icono utiliza la propiedad prefix. De nuevo, si razón aparente agreguemos un circularProgressIndicator a un TextField.

TextField(
  decoration: InputDecoration(
    prefix: CircularProgressIndicator(),
  ),
),

Cada propiedad como hint, label, etc… tiene sus propios campos de estilo.

Para estilizar un hint utiliza hintStyle, para una label utiliza labelStyle.

TextField(
  decoration: InputDecoration(
    hintText: "Texto Demostrativo",
    hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.red)
  ),
),

Nota: A pesar de que lo hice ene este ejemplo, generalmente no se cambian los colores del hint ya que es confuso para los usuarios.

Usa “helperText” (Texto Auxiliar) si no quieres una label pero quieres mostrar un mensaje persistente al usuario.

TextField(
  decoration: InputDecoration(
    helperText: "Hola"
  ),
),

Usa “decoration: null” o InputDecoration.collapsed para remover la linea inferior por defecto del TextField.

Usa esto para remover la linea inferior por defecto de un TextField.

TextField(
  decoration: InputDecoration.collapsed(hintText: "")
),

Usa “border” (borde) para dar un borde al TextField.

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder()
  )
),

Existe una vasta cantidad de decoraciones que puedes hacer en Flutter, pero no podemos revisar todas en un articulo. Aun así espero que esto te haga mas fácil entender que tan sencillo es personalizar los TextField de Flutter.

¡Eso es todo por este articulo! Espero lo hayan disfrutado y que dejen un par de aplausos si es así. Siganme para mas artículos de Flutter y comenten cualquier duda o sugerencia sobre el articulo.