El foco y los campos de texto

Cuando un campo de texto está seleccionado y acepta entrada, se dice que tiene el "foco". Por lo general, los usuarios cambian el foco a un campo de texto al tocarlo, y los desarrolladores lo cambian mediante programación utilizando las herramientas descritas en esta receta.

Gestionar el foco es una herramienta fundamental para crear formularios con un flujo intuitivo. Por ejemplo, supongamos que tienes una pantalla de búsqueda con un campo de texto. Cuando el usuario navega a la pantalla de búsqueda, puedes establecer el foco en el campo de texto para el término de búsqueda. Esto permite al usuario comenzar a escribir tan pronto como la pantalla sea visible, sin necesidad de tocar manualmente el campo de texto.

En esta receta, aprenderás cómo dar el foco a un campo de texto tan pronto como sea visible, así como también cómo dar el foco a un campo de texto cuando se toque un botón.

Para dar el foco a un campo de texto tan pronto como sea visible, utiliza la propiedad autofocus.

TextField(
  autofocus: true,
);

Para obtener más información sobre el manejo de entradas y la creación de campos de texto, consulta la sección Formularios del libro de recetas.

En lugar de cambiar inmediatamente el foco a un campo de texto específico, es posible que necesites dar el foco a un campo de texto en un momento posterior. En el mundo real, también podrías necesitar dar el foco a un campo de texto específico en respuesta a una llamada de API o un error de validación. En este ejemplo, da el foco a un campo de texto después de que el usuario presione un botón siguiendo estos pasos:

1. Crear un FocusNode.
2. Pasar el FocusNode a un TextField.
3. Dar el foco al TextField cuando se toque un botón.

Primero, crea un FocusNode. Utiliza el FocusNode para identificar un TextField específico en el "árbol de foco" de Flutter. Esto te permitirá dar el foco al TextField en los siguientes pasos.

Dado que los nodos de foco son objetos de larga duración, gestiona su ciclo de vida utilizando un objeto State. Utiliza las siguientes instrucciones para crear una instancia de FocusNode dentro del método initState() de una clase State, y límpiala en el método dispose():

// 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> {
  // Define the focus node. To manage the lifecycle, create the FocusNode in
  // the initState method, and clean it up in the dispose method.
  late FocusNode myFocusNode;
​
  @override
  void initState() {
    super.initState();
​
    myFocusNode = FocusNode();
  }
​
  @override
  void dispose() {
    // Clean up the focus node when the Form is disposed.
    myFocusNode.dispose();
​
    super.dispose();
  }
​
  @override
  Widget build(BuildContext context) {
    // Fill this out in the next step.
  }
}

Ahora que tienes un FocusNode, pásalo a un TextField específico en el método build().

@override
Widget build(BuildContext context) {
  return TextField(focusNode: myFocusNode);
}

Finalmente, dale el foco al campo de texto cuando el usuario toque un floating action button. Utiliza el método requestFocus() para realizar esta tarea.

FloatingActionButton(
  // When the button is pressed,
  // give focus to the text field using myFocusNode.
  onPressed: () => myFocusNode.requestFocus(),
),