Navegação com pushNamed

O método Navigator.of(context).pushNamed('nomeDaRota'); adiciona uma nova rota ao topo da pilha de navegação, exibindo a tela correspondente. O argumento é uma string que representa o nome da rota, o qual deve ser definido na inicialização do aplicativo:

void main() {
 runApp(
   MaterialApp(
     home: Tela1(),
     routes: {
       '/tela1': (BuildContext context) => Tela1(),
       '/tela2': (BuildContext context) => Tela2(),
       '/tela3': (BuildContext context) => Tela3(),
     },
   ),
 );
}
 

Para navegar, use Navigator.of(context).pushNamed('/tela1');. Cada chamada cria uma nova instância da tela.

Substituição de Rotas

• pushReplacementNamed

  Navigator.of(context).pushReplacementNamed('/tela4'); substitui a rota atual na pilha pela nova rota especificada. A rota anterior é descartada após a animação de entrada da nova rota.

  Exemplo de uso: Navegar de uma tela de splash para a tela inicial. O usuário não deve poder retornar à tela de splash. Este método é útil para animações de entrada.

• pushReplacement

  Navigator.pushReplacement(context, MaterialPageRoute(builder: (BuildContext context) => Tela4())); funciona de forma similar ao pushReplacementNamed, mas em vez de passar um nome de rota pré-definido, você cria diretamente a instância da nova tela. Isso permite a passagem de argumentos diretamente.

Navegação com Remoção de Rotas

• popAndPushNamed

  Navigator.popAndPushNamed(context, '/tela4'); remove a rota atual e insere a nova rota especificada em seu lugar. É útil em cenários como filtros de produtos, onde após aplicar os filtros, a tela de filtros é removida e a lista de produots é atualizada.

• pushNamedAndRemoveUntil

  Navigator.of(context).pushNamedAndRemoveUntil('/tela4', (Route<dynamic> route) => false);</dynamic> insere uma nova rota e remove todas as rotas anteriores da pilha. O predicado (Route<dynamic> route) => false</dynamic> garante que todas as rotas sejam removidas antes da nova ser aidcionada.

  Exemplo de uso: Ao deslogar, o usuário é direcionado para a tela de login. Ao pressionar o botão "voltar", o aplicativo deve fechar em vez de retornar a telas anteriores.

• pushNamedAndRemoveUntil com Predicado Específico

  Navigator.of(context).pushNamedAndRemoveUntil('/tela4', ModalRoute.withName('/tela1')); insere uma nova rota e remove todas as rotas anteriores até que a rota especificada no predicado seja encontrada. Ao retornar da nova tela, o usuário voltará para a rota especificada pelo predicado.

  Exemplo de uso: Em aplicativos de compras, após a conclusão de um pagamento, todas as telas relacionadas ao carrinho e checkout são removidas, e o usuário é levado para uma tela de confirmação. Ao retornar, ele volta para a lista de produtos ou tela principal.

  Variação com /: Navigator.of(context).pushNamedAndRemoveUntil('/tela4', ModalRoute.withName('/')); remove todas as rotas até a raiz do aplicativo.

• pushAndRemoveUntil

  Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (BuildContext context) => Tela4()), ModalRoute.withName('/')); tem funcionalidade similar ao pushNamedAndRemoveUntil, mas permite a criação direta da nova rota e a passagem de parâmetros.

  Variação com (Route<dynamic> route) => false</dynamic>: Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (BuildContext context) => Tela4()), (Route<dynamic> route) => false);</dynamic> faz com que a nova tela seja a única na pilha.

• popUntil

  Navigator.popUntil(context, ModalRoute.withName('/tela2')); remove rotas da pilha até que a rota especificada no predicado seja encontrada. É útil quando o usuário decide cancelar um processo em várias etapas, retornando-o a um ponto anterior sem iniciar novas rotas.

Gerenciamento de Saída de Rotass com pop

• maybePop

  Navigator.of(context).maybePop(); tenta fechar a rota atual. A operação só é realizada se, após o pop, houver outra rota visível na pilha. Caso contrário, nada acontece.

• canPop

  Navigator.of(context).canPop(); verifica se é possível fechar a rota atual e retorna um valor booleano.

• pop

  Navigator.of(context).pop(); fecha a rota atual.

Passagem de Parâmetros e Retorno de Valores

Passando Parâmetros

Para passar parâmetros, defina variáveis na página de destino e inclua-as no construtor. Ao navegar, utilize MaterialPageRoute para instanciar a nova tela e passar os valores:

// Na página de destino:
class MainPage extends StatelessWidget {
 final String parametroRecebido;

 MainPage(this.parametroRecebido);

 @override
 Widget build(BuildContext context) {
   print(parametroRecebido);
   // ...
 }
}

// Ao navegar:
String valorParametro = "Exemplo de parâmetro";
Navigator.push(
 context,
 MaterialPageRoute(builder: (BuildContext context) => MainPage(valorParametro)),
);
 

Retornando Valores

Para receber um valor de retorno de uma rota, utilize o método .then() na chamada do Navigator.push:

String resultado;
String parametroParaTela5 = "Dados para Tela 5";

Navigator.push(
 context,
 MaterialPageRoute(builder: (BuildContext context) => Tela5(parametroParaTela5)),
).then((dadosRecebidos) {
 resultado = dadosRecebidos;
 print(resultado);
});

// Na Tela5, ao retornar:
Navigator.of(context).pop('Este é o valor retornado pela Tela 5');
 

O valor passado para Navigator.of(context).pop() será recebido no callback do .then().