Os aplicativos para celular costumam ter várias categorias de conteúdo para oferecer. O aplicativo Google Play Store, por exemplo, apresenta seu conteúdo em categorias como jogos, aplicativos, filmes e livros. Em aplicativos Flutter, o widget BottomNavigationBar permite que os usuários vejam qualquer categoria conforme o aplicativo é iniciado e olhem rapidamente para as outras com apenas o toque de um dedo.
Neste tutorial, vamos contar tudo o que você precisa saber sobre BottomNavigationBar no Flutter. Demonstraremos como funciona, examinaremos alguns casos de uso e mostraremos como personalizar o widget BottomNavigationBar em seu aplicativo Flutter.
Aqui está o que vamos cobrir:
- O que é BottomNavigationBar no Flutter?
- Personalização da BottomNavigationBar
- Como preservar o estado das páginas
- Como incluir TabBar com BottomNavigationBar
- Ocultando a barra de navegação inferior na rolagem
O que é BottomNavigationBar no Flutter?
BottomNavigationBar é um widget que exibe uma linha de pequenos widgets na parte inferior de um aplicativo Flutter. Normalmente, é usado para mostrar cerca de três a cinco itens. Cada item deve ter um rótulo e um ícone. BottomNavigationBar permite que você selecione um item por vez e navegue rapidamente para uma determinada página.
Agora, vamos percorrer o processo de criação de uma BottomNavigationBar simples, passo a passo. O produto acabado terá a seguinte aparência:
Mostrando BottomNavigationBar
O widget BottomNavigationBar é fornecido à propriedade bottomNavigationBar de Scaffold :
Scaffold ( appBar: AppBar ( title: const Text ('BottomNavigationBar Demo'), ), bottomNavigationBar: BottomNavigationBar ( items: const [ BottomNavigationBarItem ( ícone: Ícone (Icons.call), rótulo:'Chamadas', ), BottomNavigationBarItem ( ícone: ícone (Icons.camera), rótulo:'Câmera', ), BottomNavigationBarItem ( ícone: Ícone (Icons.chat), rótulo:'Chats', ), ], ),
);
BottomNavigationBar tem uma propriedade obrigatória chamada items . items aceitam um widget de um tipo BottomNavigationBarItem . BottomNavigationBarItem é simplesmente usado para mostrar o item real dentro de BottomNavigationBar.
O código acima exibe apenas a BottomNavigationBar com o primeiro item selecionado como padrão. Isso não muda a seleção ainda quando clicamos nos outros itens:
Mostrando uma seleção de itens
Para mostrar a seleção de outros itens, usaremos duas propriedades: onTap e currentIndex .
int _selectedIndex=0;//Novo BottomNavigationBar ( items: const[ ... currentIndex: _selectedIndex,//Novo onTap: _onItemTapped,//Novo ) //Novo void _onItemTapped (int index) { setState (() { _selectedIndex=index; }); }
A variável _selectedIndex contém o valor do item atualmente selecionado. _selectedIndex é dado à propriedade currentIndex .
O retorno de chamada _onItemTapped () é atribuído a onTap de BottomNavigationBar, que retorna o índice quando o item é tocado. Simplesmente atribuindo um índice de item atualmente selecionado para _selectedIndex e fazendo setState irá mostrar o item como selecionado em BottomNavigationBar.
Exibindo a página do item selecionado
No momento, não temos nenhuma página para mostrar com base no item selecionado. Então, vamos em frente e ótimo:
//Novo Const static List_pages= [ Ícone( Icons.call, tamanho: 150, ), Ícone( Icons.camera, tamanho: 150, ), Ícone( Icons.chat, tamanho: 150, ), ]; Andaime( appBar: AppBar ( title: const Text ('BottomNavigationBar Demo'), ), corpo: Centro ( filho: _pages.elementAt (_selectedIndex),//Novo ), bottomNavigationBar: BottomNavigationBar ( ... ), );
_pages contém uma lista de widgets. Para simplificar, estamos apenas mostrando um grande ícone do próprio item.
Mostrar uma página no centro da tela de _pages com base no _selectedIndex do item fará o resto da mágica.
Agora temos BottomNavigationBar instalado e funcionando:
A ilustração abaixo mostra como o código se traduz no design:
Personalização da BottomNavigationBar
BottomNavigationBar tem várias opções para personalizá-lo de acordo com sua necessidade. Vamos dar um zoom em algumas das propriedades que você pode personalizar.
Cor de fundo
Você pode querer alterar a cor de fundo da BottomNavigationBar para corresponder à sua marca. Você pode fazer isso simplesmente usando a propriedade backgroundColor .
BottomNavigationBar ( backgroundColor: Colors.blueAccent, items: const[ ... ], )
Elevação
Por padrão, BottomNavigationBar é definido para elevar 8 pontos da superfície para que apareça no topo das páginas. Você pode definir esta propriedade com qualquer valor:
BottomNavigationBar ( backgroundColor: Colors.white10, elevação: 0, items: const[ ... ], )
Tamanho do ícone
Você pode reduzir ou ampliar o tamanho de todos os ícones de uma vez usando a propriedade iconSize :
BottomNavigationBar ( iconSize: 40, items: const[ ... ], )
Cursor do mouse
Ao executar na web, você pode personalizar o cursor do mouse quando ele passa sobre um item na BottomNavigationBar:
BottomNavigationBar ( mouseCursor: SystemMouseCursors.grab, items: const[ ... ], )
Item selecionado
Você pode fazer o item selecionado parecer diferente de um não selecionado usando as várias propriedades selecionadas de BottomNavigationBar:
BottomNavigationBar ( selectedFontSize: 20, selectedIconTheme: IconThemeData (color: Colors.amberAccent, size: 40), selectedItemColor: Colors.amberAccent, selectedLabelStyle: TextStyle (fontWeight: FontWeight.bold), items: const[ ... ], )
Itens não selecionados
Você também pode alterar a aparência dos itens não selecionados. BottomNavigationBar tem algumas propriedades não selecionadas que você pode usar:
BottomNavigationBar ( unselectedIconTheme: IconThemeData ( color: Colors.deepOrangeAccent, ), unselectedItemColor: Colors.deepOrangeAccent, items: const[ ... ], )
Removendo rótulos
Se você deseja se livrar totalmente dos rótulos, pode usar showSelectedLabels e showUnselectedLabels :
BottomNavigationBar ( iconSize: 40, showSelectedLabels: false, showUnselectedLabels: false, items: const[ ... ], )
Destacando o item selecionado
Você pode enfatizar o item selecionado definindo o tipo BottomNavigationBar como BottomNavigationBarType.shifting :
BottomNavigationBar ( tipo: BottomNavigationBarType.shifting, selectedFontSize: 20, selectedIconTheme: IconThemeData (color: Colors.amberAccent), selectedItemColor: Colors.amberAccent, selectedLabelStyle: TextStyle (fontWeight: FontWeight.bold), items: const[ ... ], )
Como preservar o estado das páginas
Embora a versão básica do BottomNavigationBar esteja funcionando bem, temos um problema: qualquer ação-por exemplo, pesquisar, filtrar, inserir texto, rolar por uma lista, preencher um formulário de contato, etc.-está sendo executada na página serão perdidos ao selecionar outro item da BottomNavigationBar:
Na demonstração acima, estamos tentando encontrar um contato. Quando mudamos para a seção de câmera antes de terminarmos nossa pesquisa e, em seguida, retornamos à seção de bate-papo, o texto inserido anteriormente desapareceu completamente.
Não tema-a solução é bastante simples. Basta substituir o widget existente por IndexedStack . O widget IndexedStack contém uma pilha de widgets, mas mostra apenas um de cada vez. Como todos os widgets ficam na pilha, o estado é preservado.
//Antes Centro( filho: _pages.elementAt (_selectedIndex), ) //Após IndexedStack ( índice: _selectedIndex, filhos: _pages, )
A propriedade index é usada para mostrar uma página de _pages , que é fornecida à propriedade children.
Como incluir TabBar com BottomNavigationBar
Às vezes, uma única página não é suficiente para cobrir uma ampla gama de subcategorias em uma categoria pai dentro da BottomNavigationBar. Por exemplo, o aplicativo Google Play Store tem subcategorias rotuladas Para você, Top charts, Kids, etc. Um cenário como este exige o widget Flutter TabBar .
Para fins de demonstração, vamos tentar adicionar TabBar para chamadas recebidas, efetuadas e perdidas dentro da seção de chamadas, conforme mostrado abaixo:
A estrutura geral de BottomNavigationBar permanece a mesma. Você pode precisar criar uma classe separada para a página na qual deseja incluir um TabBar. Para isso, a CallPage é criada e adicionada à lista de páginas.
Const estática List_pages= [ CallPage (), //página da câmera //página de bate-papo ];
A página de chamadas tem a seguinte aparência:
DefaultTabController ( comprimento: 3, criança: Scaffold ( appBar: AppBar ( FlexibleSpace: Column ( mainAxisAlignment: MainAxisAlignment.end, crianças: [ Barra de abas( guias: [ Aba( texto:'Entrada', ), Aba( texto:'Saída', ), Aba( texto:'Perdido', ), ], ) ], ), ), body: TabBarView ( crianças: [ Página de entrada (), Página de saída (), MissedPage (), ], ), ), );
Esta é a saída:
Ocultar a barra de navegação inferior na rolagem
Ao criar um aplicativo Flutter, você sempre deseja utilizar o espaço da tela da forma mais eficiente possível. Quando um usuário está rolando por uma longa lista de itens em uma das páginas do seu aplicativo, você pode ocultar a BottomNavigationBar suavemente. Esse comportamento melhora a experiência do usuário porque você está exibindo apenas o conteúdo necessário no momento.
A partir de agora, a BottomNavigationBar permanece como está enquanto rola pela lista de chamadas feitas:
Vamos examinar o processo de ocultação da BottomNavigationBar passo a passo.
Primeiro, envolva sua exibição de lista em NotificationListener widget. NotificationListener escuta a notificação de rolagem acontecendo no ListView.
NotificationListener( onNotification: _handleScrollNotification, criança: Scaffold ( corpo: Centro ( filho: ListView.builder ( itemCount: items.length, itemBuilder: (contexto, índice) { return ListTile ( título: Texto ('$ {items [index]}'), ); }, ), ), ), );
Em seguida, implemente o método _handleScrollNotification para determinar a direção da rolagem. Notifique a página que hospeda a BottomNavigationBar para ocultá-la quando o usuário rolar para baixo.
bool _handleScrollNotification (ScrollNotification notification) { if (notification.depth==0) { if (a notificação é UserScrollNotification) { final UserScrollNotification userScroll=notificação; switch (userScroll.direction) { case ScrollDirection.forward: widget.isHideBottomNavBar (true); pausa; case ScrollDirection.reverse: widget.isHideBottomNavBar (false); pausa; case ScrollDirection.idle: pausa; } } } retorna falso;
}
Envolva BottomNavigationBar dentro do widget SizeTransition . SizeTransition anima o tamanho de BottomNavigationBar.
AnimationController animationController= AnimationController (vsync: this, duration: Duration (milliseconds: 300)); SizeTransition ( sizeFactor: animationController, axisAlignment:-1.0, filho: BottomNavigationBar ( items: const[ ... ], ), )
Start hiding animation on receiving the callback from the page that has the ListView.
CallsPage( isHideBottomNavBar: (isHideBottomNavBar) { isHideBottomNavBar ? animationController.forward() : animationController.reverse(); },
)
Here is the result:
É isso! The full code for this Flutter BottomNavigationBar example can be found on GitHub.
Conclusão
In this tutorial, we showed how to integrate BottomNavigationBar and customize it. We also learned various use cases with examples that you’ll likely encounter while developing a full-fledged Flutter app. I hope the practical examples we examined in this article helped you understand these important concepts.
The post How to build a bottom navigation bar in Flutter appeared first on LogRocket Blog.
