Como a navegação funciona no Flutter?

Question

Accepted Answer

**Navegação** no Flutter move entre telas (páginas/rotas) — usando o **Navigator** (uma pilha de rotas) para navegação básica, ou pacotes de roteamento declarativo para aplicativos mais complexos. Entender navegação é essencial para construir aplicativos com múltiplas telas.

## Navegação básica com Navigator (uma pilha)

```dart
// the Navigator manages a STACK of routes (screens)
// PUSH a new screen onto the stack (navigate to it)
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

// POP — go back (remove the top screen, return to the previous)
Navigator.pop(context);
```

```text
Think of navigation as a STACK of screens:
  → PUSH adds a screen on top (navigate forward)
  → POP removes the top screen (go back)
  → the back button / gesture also pops
```

## Passando dados entre telas

```dart
// pass data forward (via the constructor)
Navigator.push(context, MaterialPageRoute(
  builder: (context) => DetailScreen(itemId: 42),
));

// return data back when popping
Navigator.pop(context, result);          // return a result
final result = await Navigator.push(...); // receive it (push returns a Future)
```

## Rotas nomeadas e roteamento moderno

```dart
// NAMED routes — define routes by name (cleaner for many screens)
Navigator.pushNamed(context, '/details');
// configured in MaterialApp(routes: {...})

// MODERN: declarative routing packages (go_router) for complex apps:
//   → URL-based routing, deep linking, web support, nested navigation
//   → go_router is the recommended approach for non-trivial apps
```

## Por que isso importa

Entender navegação é essencial porque **a maioria dos aplicativos tem várias telas**, e mover entre elas é fundamental para a funcionalidade do aplicativo, portanto é conhecimento obrigatório do Flutter.

O conceito central — o **Navigator do Flutter gerenciando uma pilha de rotas** (telas), onde você **push** para navegar para frente (adicionando uma tela no topo) e **pop** para voltar (removendo a tela do topo) — é o modelo mental fundamental para navegação, e a metáfora de pilha (correspondendo a como os usuários navegam para frente e para trás por um aplicativo) torna isso intuitivo.

Entender **navegação básica** (push/pop) é necessário para qualquer aplicativo com múltiplas telas.

Entender **passar dados entre telas** (enviar dados para frente via construtores e retornar resultados ao fazer pop, já que push retorna uma Future) é essencial porque as telas comumente precisam compartilhar dados (passando um item para uma tela de detalhe, retornando uma seleção).

Entender **rotas nomeadas** (definindo rotas por nome para organização mais limpa com muitas telas) e especialmente **roteamento declarativo moderno** (pacotes como **go_router**, que é recomendado para aplicativos não triviais, fornecendo roteamento baseado em URL, deep linking, suporte web e navegação aninhada) reflete as melhores práticas atuais — conforme os aplicativos crescem, roteamento declarativo lida com complexidade melhor que push/pop imperativo.

Como praticamente todos os aplicativos têm várias telas e navegar entre elas (com passagem de dados) é fundamental para a funcionalidade do aplicativo, e como entender o modelo de pilha do Navigator, passagem de dados e roteamento moderno (go_router) é necessário para construir aplicativos com múltiplas telas, entender navegação no Flutter é conhecimento essencial e fundamental — uma capacidade central necessária em quase todo aplicativo Flutter e necessária para construir as experiências multi-tela que aplicativos reais exigem.