🗺️ De seccións a pantallas

Ata agora construímos o contido dunha pantalla e cambiamos entre seccións dunha barra inferior. Agora queremos abrir outra pantalla completa: por exemplo, desde a portada do instituto entrar na información de 2º DAM e despois volver.

Flutter xestiona esas pantallas mediante Navigator. Cada pantalla que abrimos está dentro dunha ruta. Podemos imaxinar as rutas como unha pila de follas: a última que colocamos é a que vemos; ao retirala aparece a anterior.

Ao iniciar:      Inicio
Ao abrir grupo:  Inicio → Grupo (pantalla visible)
Ao volver:       Inicio

A pantalla anterior permanece na pila mentres abrimos a seguinte. Para volver usamos pop; facer outro push á pantalla inicial crearía unha nova ruta, en vez de regresar á que xa tiñamos.

🔍 Como se abre unha pantalla?

Dentro do callback dun botón escribimos:

Navigator.push<void>(
  context, // Contexto da pantalla desde a que abrimos a seguinte.
  MaterialPageRoute<void>(
    builder: (context) => const PantallaGrupo(), // Creamos o destino.
  ),
);

O primeiro argumento é o context; o segundo é a ruta que queremos abrir. builder é un callback: Flutter chámao para construír a pantalla. A frecha => devolve o widget PantallaGrupo.

<void> indica que nesta ruta non esperamos recibir un dato ao volver. Máis adiante usaremos <int> ou <String> cando a pantalla devolva un número ou un texto.

💡 Mantemos un MaterialApp na raíz e un Scaffold en cada pantalla. Os exemplos completos poden substituír lib/main.dart; cada programa execútase por separado.

➡️ Unha segunda pantalla

🔗 DartPad:

• https://dartpad.dev/?id=bbd7fdde8d30993bda132a5268fae81e.

Ao premer «Abrir grupo», execútase o push e aparece PantallaGrupo. O botón «Volver» chama a Navigator.pop(context) e deixa visible PantallaInicio.

A AppBar da segunda pantalla tamén pode mostrar automaticamente unha frecha para volver. O contexto empregado para navegar pertence a unha pantalla situada baixo MaterialApp, onde se proporciona o Navigator.

📤 Pasar datos polo construtor

Para enviar un nome, a pantalla de destino declárao como atributo final e recíbeo no construtor. É o mesmo mecanismo que usamos nos widgets propios.

O percorrido do dato é:

1. A pantalla de inicio crea PantallaGrupo(nome: 'Diego Rodicio').
2. O construtor recibe ese texto mediante required this.nome e gárdao no atributo nome.
3. A pantalla de destino utiliza o atributo en Text('Titor: $nome').

required obriga a indicar o nome ao crear a pantalla. final significa que ese atributo non se reasigna despois de crear o widget. Non precisamos unha variable global nin Provider para enviar este dato.

Esta variante do exemplo engade o parámetro nome:

🔗 DartPad:

• https://dartpad.dev/?id=af1bbf7b0cdef297de44a3fb5b90554b.

Neste exemplo enviamos un texto, pero o construtor tamén pode recibir un número ou un obxecto, como unha instancia de Alumno. Pasar un obxecto non crea automaticamente unha copia.

💡 Enviar datos e recibir un resultado son dúas operacións distintas: o construtor leva os datos á pantalla nova; Navigator.pop(context, resultado) permitirá traelos de volta.

Usaremos construtores para pasar datos e tipos concretos cando os coñezamos. No seguinte apartado veremos como identificar as rutas por un nome.

📚 Consulta:

• Navegación → https://docs.flutter.dev/ui/navigation.