---
title: 🗺️ Navegación e paso de datos
description: "## 🗺️ 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…"
url: "https://www.drodicio.com/docs/flutter/tema-5-navegacion/navegacion/"
updated: "2026-10-12"
category: Tema 5. Interaccion, formularios e navegacion
---

# 🗺️ Navegación e paso de datos

## 🗺️ 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.

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

| Peza | Que fai? |
| --- | --- |
| `Navigator.push` | Engade unha ruta e mostra a nova pantalla. |
| `MaterialPageRoute` | Prepara a ruta, incluíndo a transición entre pantallas. |
| `builder` | Función que recibe un contexto e devolve o widget da nova pantalla. |
| `Navigator.pop` | Retira a ruta actual para volver á anterior. Tamén pode devolver un dato. |

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.

![Abrir unha pantalla e volver á anterior con Navigator](https://www.drodicio.com/wp-content/uploads/2026/10/navegacion.png)
Abrir unha pantalla e volver á anterior con Navigator

## 🔍 Como se abre unha pantalla?

Dentro do callback dun botón escribimos:

```dart
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`](https://dartpad.dev/?id=bbd7fdde8d30993bda132a5268fae81e).

[https://dartpad.dev/embed-inline.html?id=bbd7fdde8d30993bda132a5268fae81e](https://dartpad.dev/embed-inline.html?id=bbd7fdde8d30993bda132a5268fae81e)

![Exemplo de navegación con Navigator.push e Navigator.pop](https://www.drodicio.com/wp-content/uploads/2026/10/exemplo_navegacion-scaled.png)
Exemplo de navegación con Navigator.push e Navigator.pop

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`](https://dartpad.dev/?id=af1bbf7b0cdef297de44a3fb5b90554b).

[https://dartpad.dev/embed-inline.html?id=af1bbf7b0cdef297de44a3fb5b90554b](https://dartpad.dev/embed-inline.html?id=af1bbf7b0cdef297de44a3fb5b90554b)

![Envío do nome do titor polo construtor da pantalla](https://www.drodicio.com/wp-content/uploads/2026/10/pasar_datos-scaled.png)
Envío do nome do titor polo construtor da pantalla

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`](https://docs.flutter.dev/ui/navigation).