DEV Community

Toshi Ossada for flutterbrasil

Posted on

Navegando dentro de uma BottomNavigationBar

Fala Devs, blz?

Um problema que me deparei ao trabalhar com BottomNavigationBar foi a de realizar a navegação dentro da Aba selecionada, sem que a navegação empilhe em cima da minha tela principal. Para construir a BottomNavigationBar é simples, construímos nosso MaterialApp dentro da main.

Configuramos a rota e aproveito e faço a lista de widgets das minhas Tabs

Mas ao realizar a navegação o resultado que obtive foi

Uma solução para isso é criarmos chave de navegação para cada aba

E podemos adicionar dentro do MaterialApp

Agora na nossa Aba podemos envolver ela em um MaterialApp passando a navigationKey daquela aba, isso fara ele criar um contexto de navegação. Aqui também é necessário configurar todas as subRotas desta aba.

Agora no pushNamed podemos usar a navigationKey que passamos nesse novo contexto pegando o currentContext da navigationKey.

O resultado obtido será

Melhorando nosso código podemos componentizar esse MaterialApp dentro de um widget para utilizarmos nas tabs

Também pode existir a necessidade de navegar no contexto principal, realmente empilhar na stack de navegação.

E para navegar precisamos utilizar o contexto principal

O resultado obtido será

Bom agora já sabe como modularizar seus aplicativos de forma muito simples, deixando as rotas de forma independente uma da outra, o exemplo está no github abaixo

https://github.com/toshiossada/bottom_navigation_example

Image description

Entre em nosso discord para interagir com a comunidade: https://discord.com/invite/flutterbrasil
https://linktr.ee/flutterbrasil

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs