119 – NAVEGAÇÃO (Navigate e Route) em FLUTTER

Playlist: Curso Grátis de FLUTTER e DART Completo

Navegação e roteamento
Docs
Desenvolvimento
UI
Navegação e roteamento
Para uma discussão sobre como usar a classe Navegador do Flutter com vários tipos de rotas, consulte a documentação da API na classe Navegador.

As receitas de livro de receitas a seguir abrangem navegação e roteamento:

Navegue para uma nova tela e volte
Navegue com rotas nomeadas
Enviar dados para uma nova tela
Retornar dados de uma tela
Animando um widget em telas

Navegue para uma nova tela e volte
Docs
Livro de receitas
Navegação
Navegue para uma nova tela e volte
Conteúdo
1. Crie duas rotas
2. Navegue até a segunda rota usando Navigator.push ()
3. Retornar para a primeira rota usando Navigator.pop ()
Exemplo completo
A maioria dos aplicativos contém várias telas para exibir diferentes tipos de informações. Por exemplo, um aplicativo pode ter uma tela que exibe produtos. Quando o usuário toca a imagem de um produto, uma nova tela exibe detalhes sobre o produto.

Terminologia: Em Flutter, telas e páginas são chamadas de rotas. O restante desta receita refere-se a rotas.

No Android, uma rota é equivalente a uma atividade. No iOS, uma rota é equivalente a um ViewController. Em Flutter, uma rota é apenas um widget.

Navegue até uma nova rota usando o Navegador. Esta receita usa os seguintes passos:

As próximas seções mostram como navegar entre duas rotas, usando estas etapas:

Crie duas rotas.
Navegue até a segunda rota usando Navigator.push ().
Retornar para a primeira rota usando Navigator.pop ().
1. Crie duas rotas
Primeiro, crie duas rotas para trabalhar. Como esse é um exemplo básico, cada rota contém apenas um único botão. Tocar no botão na primeira rota navega para a segunda rota. Tocar no botão na segunda rota retorna para a primeira rota.

Primeiro, configure a estrutura visual:

2. Navegue até a segunda rota usando Navigator.push ()
Para mudar para uma nova rota, use o método Navigator.push (). O método push () adiciona uma rota à pilha de rotas gerenciadas pelo Navegador. De onde vem a rota? Você pode criar o seu próprio, ou usar um MaterialPageRoute, o que é útil porque ele faz a transição para o novo roteiro usando uma animação específica da plataforma.

No método build () do widget FirstRoute, atualize o retorno de chamada onPressed ():

3. Retornar para a primeira rota usando Navigator.pop ()
Como você fecha a segunda rota e volta para a primeira? Usando o método Navigator.pop (). O método pop () remove a rota atual da pilha de rotas gerenciadas pelo navegador.

Para implementar um retorno para a rota original, atualize o retorno de chamada onPressed () no widget SecondRoute: