Navegando dentro de uma BottomNavigationBar

#bottomnavigationbar #navigate #context #flutter

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