Manejar cambios en un campo de texto

En algunos casos, resulta útil ejecutar una función de callback cada vez que cambia el texto en un campo de texto. Por ejemplo, es posible que quieras crear una pantalla de búsqueda con funcionalidad de autocompletado donde desees actualizar los resultados a medida que el usuario escribe.

¿Cómo ejecutas una función de callback cada vez que cambia el texto? Con Flutter, tienes dos opciones:

1. Asignar un callback onChanged() a un TextField o a un TextFormField.
2. Utilizar un TextEditingController.

El enfoque más simple es asignar un callback onChanged() callback a un TextField o a un TextFormField. Cada vez que el texto cambia, se invoca el callback.

En este ejemplo, imprime el valor actual y la longitud del campo de texto en la consola cada vez que cambie el texto.

Es importante usar characters al tratar con la entrada del usuario, ya que el texto puede contener caracteres complejos. Esto asegura que cada carácter se cuente correctamente tal como le aparece al usuario.

TextField(
  onChanged: (text) {
    print('First text field: $text (${text.characters.length})');
  },
),

Un enfoque más potente, pero más elaborado, es asignar un TextEditingController como la propiedad controller del TextField o de un TextFormField.

Para ser notificado cuando el texto cambia, escucha al controlador usando el método addListener() mediante los siguientes pasos:

1. Crear un TextEditingController.
2. Conecta el TextEditingController a un campo de texto.
3. Crear una función para imprimir el último valor.
4. Escuchar los cambios en el controlador.

Crea un TextEditingController:

// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});
​
  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}
​
// Define a corresponding State class.
// This class holds data related to the Form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Create a text controller. Later, use it to retrieve the
  // current value of the TextField.
  final myController = TextEditingController();
​
  @override
  void dispose() {
    // Clean up the controller when the widget is removed from the
    // widget tree.
    myController.dispose();
    super.dispose();
  }
​
  @override
  Widget build(BuildContext context) {
    // Fill this out in the next step.
  }
}

Asigna el TextEditingController ya sea a un TextField o a un TextFormField. Una vez que conectes estas dos clases, podrás comenzar a escuchar los cambios en el campo de texto.

TextField(controller: myController),

Necesitas una función que se ejecute cada vez que cambie el texto. Crea un método en la clase _MyCustomFormState que imprima el valor actual del campo de texto.

void _printLatestValue() {
  final text = myController.text;
  print('Second text field: $text (${text.characters.length})');
}

Finalmente, escucha al TextEditingController y llama al método _printLatestValue() cuando el texto cambie. Utiliza el método addListener() para este propósito.

Comienza a escuchar los cambios cuando la clase _MyCustomFormState se inicialice, y deja de escuchar cuando _MyCustomFormState sea liberada (disposed).

@override
void initState() {
  super.initState();
​
  // Start listening to changes.
  myController.addListener(_printLatestValue);
}

@override
void dispose() {
  // Clean up the controller when the widget is removed from the widget tree.
  // This also removes the _printLatestValue listener.
  myController.dispose();
  super.dispose();
}