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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay