🧩 Enviar unha función a outra pantalla

Nos apartados anteriores aprendemos a enviar datos dunha pantalla a outra mediante os construtores ou o parámetro arguments.

Pero imaxinemos que abrimos unha segunda pantalla para escoller un alumno. Como podemos comunicar á pantalla principal o nome que seleccionamos?

Unha posibilidade é utilizar un callback, como xa vimos no Tema 3.3.

A idea é sinxela: a pantalla principal pásalle unha función á segunda pantalla. Cando o usuario escolle un alumno, a segunda pantalla executa esa función para comunicar o nome seleccionado.

No seguinte exemplo, a pantalla principal mostra o nome dun alumno e permite cambialo escollendo entre Xurxo, Iria e Roi.

📤 Preparar e pasar o callback

A pantalla principal garda o nome do alumno na variable _nome, dentro do seu State.

Para cambiar ese nome, definimos o método _actualizarNome(), que recibe un texto e actualiza a variable mediante setState():

void _actualizarNome(String nome) {
  setState(() {
    _nome = nome; // Gardamos o nome e actualizamos a interface.
  });
}

Cando abrimos a segunda pantalla, enviámoslle tanto o nome actual como a función que permite cambialo:

PantallaSeleccion(
  nomeActual: _nome, // Nome que queremos mostrar.
  aoSeleccionar: _actualizarNome, // Función para comunicar a selección.
)

Neste código:

• nomeActual: _nome envía o nome do alumno que está seleccionado.
• aoSeleccionar: _actualizarNome envía a función que permite actualizar ese nome.

💡 Fíxate: escribimos _actualizarNome sen parénteses porque queremos pasar a función, non executala. Se escribísemos _actualizarNome('Iria'), estariamos executando o cambio nese momento, antes de que o usuario escollese un alumno.

📥 Recibir e executar a función

A segunda pantalla necesita un atributo para gardar a función recibida. Para iso declaramos:

final void Function(String) aoSeleccionar;

Nesta declaración:

• void Function(String) indica que o atributo almacenará unha función que recibe un texto (String) e non devolve ningún valor (void).
• aoSeleccionar é o nome que lle damos a ese atributo.

A función recíbese a través do construtor, igual que calquera outro dato.

Cando o usuario selecciona un alumno, executamos a función recibida e pechamos a pantalla:

aoSeleccionar('Iria'); // Comunicamos o nome seleccionado.
Navigator.pop(context); // Volvemos á pantalla anterior.

Son dúas accións diferentes:

• aoSeleccionar('Iria') executa a función recibida para actualizar o nome na pantalla principal.
• Navigator.pop(context) pecha a segunda pantalla e volve á anterior.

É importante comprender que a segunda pantalla non modifica directamente a variable _nome. Simplemente executa a función que recibiu, e esa función encárgase de actualizar o dato na pantalla principal.

💡 Aínda que na segunda pantalla chamamos á función aoSeleccionar(), realmente estamos executando _actualizarNome(), porque esa foi a función que lle pasamos desde a pantalla principal.

🧪 Exemplo completo

🔗 DartPad:

• https://dartpad.dev/?id=761c5b1ba40109f37b6a0a6dfddff366.

🔍 Seguir o cambio paso a paso

1. A pantalla principal comeza mostrando o alumno Xurxo, porque _nome = 'Xurxo'.
2. Ao premer «Escoller», abrimos PantallaSeleccion e pasámoslle a función _actualizarNome mediante o atributo aoSeleccionar.
3. Na segunda pantalla prememos «Iria», polo que se executa aoSeleccionar('Iria').
4. Como aoSeleccionar contén a función _actualizarNome, realmente estamos executando _actualizarNome('Iria') na pantalla principal.
5. Esta función utiliza setState() para cambiar o valor de _nome a 'Iria' e solicitar a actualización da interface.
6. Finalmente, Navigator.pop(context) pecha a segunda pantalla e volvemos á principal, onde aparece «Alumno: Iria».

💡 Lembra: aoSeleccionar() e _actualizarNome() non son dúas funcións diferentes neste exemplo. aoSeleccionar é o atributo que garda a referencia á función _actualizarNome, recibida desde a pantalla principal.

Se volvemos coa frecha sen seleccionar ningún alumno, non se executa o callback e o nome anterior consérvase.

💡 A segunda pantalla pode ser un StatelessWidget porque non necesita gardar un estado propio que cambie. Simplemente mostra os datos recibidos e comunica a opción seleccionada. O estado que cambia pertence á pantalla principal, que é un StatefulWidget.

No seguinte apartado veremos outra forma de comunicar o resultado: devolvelo ao pechar a ruta e recollelo mediante await. Son dúas alternativas para comunicar información entre pantallas, polo que non necesitamos utilizar ambas para transmitir o mesmo cambio.

📚 Consulta:

• Interactividade e callbacks → https://docs.flutter.dev/ui/interactivity.