Criando um BottomNavigationBar com Flutter \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 12 Horas 43 Min 17 Seg Tempo restante da oferta: 12 43 17 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Criando um BottomNavigationBar com Flutter [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) [ Dart ](https://www.treinaweb.com.br/blog/categoria/dart) # Criando um BottomNavigationBar com Flutter Veja neste artigo como criar um BottomNavigationBar com Flutter. [ Fagner Pinheiro ](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/criando-um-bottomnavigationbar-com-flutter.png) Assim como o [DrawerNavigator](https://www.treinaweb.com.br/blog/criando-um-drawer-navigator-com-flutter/), o `BottomNavigatorBar` é um dos principais widgets de navegação entre páginas no Flutter. Basicamente, é uma barra localizada no canto inferior da página que exibe as telas disponíveis para navegação. Muito utilizado para a criação de apps, o `BottomNavigatorBar` é uma excelente alternativa quando precisamos navegar por poucas páginas de um app. Sendo assim, veremos neste artigo como criar um BottomNavigationBar com Flutter. ## Criando estrutura da tela Um dos widgets mais utilizados para a construção da estrutura de telas em um aplicativo Flutter é o `Scaffold` . Basicamente, este widget provê uma estrutura padrão para os aplicativos, suportando o uso de componentes do Material Design, como AppBars, SnacBars, [DrawerNavigation](https://www.treinaweb.com.br/blog/criando-um-drawer-navigator-com-flutter/) e, claro, o `BottomNavigationBar`. Sendo assim, a primeira coisa que temos que fazer é definir que nosso aplicativo irá retornar um widget do tipo Scaffold: ```java class HomeScreen extends StatefulWidget { @override _HomeScreenState createState() => _HomeScreenState(); } class _HomeScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), ); } } ``` Vale lembrar que nossa tela possuirá uma alteração de estado (quando clicarmos sobre um ícone no BottomNavigationbar), então nossa tela será do tipo [StatefulWidget](https://www.treinaweb.com.br/blog/flutter-widgets-stateful-e-stateless/). [ ![Flutter - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/flutter.svg) Curso Flutter - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/flutter-fundamentos) Este widget retornará uma página similar à imagem abaixo: ![Estrutura da tela do aplicativo](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/estrutura-tela-aplicativo.png) ## Criando BottomNavigationBar Com a estrura da página pronta, o primeiro passo para criar o `BottomNavigationBar` é adicionar uma nova instância deste `widget` à propriedade `bottomNavigationBar` do widget `Scaffold`: ```java class _HomeScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), bottomNavigationBar: BottomNavigationBar( currentIndex: 0, items: [ BottomNavigationBarItem( icon: Icon(Icons.person), title: Text("Minha conta") ), BottomNavigationBarItem( icon: Icon(Icons.shopping_basket), title: Text("Meus pedidos") ), BottomNavigationBarItem( icon: Icon(Icons.favorite), title: Text("Favoritos") ), ], ), ); } } ``` Este código irá criar um `BottomNavigationBar` com três itens. Cada item possui um ícone e seu respectivo texto. Estes itens devem ser adicionados à propriedade `items` da classe `BottomNavigationBar`. Já a propriedade `currentIdex` indica qual o item que deve estar selecionado quando o `BottomNavigationBar` for renderizado: ![Tela com BottomNavigation criado](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/tela-bottom-navigation-criado.png) ## Preparando navegação A navegação do `BottomNavigationBar` não é feito por meio da classe `Navigator`, já que a ideia é que uma nova tela seja exibida sem que a barra de navegação seja removida. Sendo assim, precisamos criar uma lista de `widgets` com as páginas que o `BottomNavigationBar` irá navegar. ```java class _HomeScreenState extends State { final List _telas = [ NewPageScreen("Minha conta"), NewPageScreen("Meus pedidos"), NewPageScreen("Favoritos") ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: _telas[0], bottomNavigationBar: BottomNavigationBar( currentIndex: 0, items: [ BottomNavigationBarItem( icon: Icon(Icons.person), title: Text("Minha conta") ), BottomNavigationBarItem( icon: Icon(Icons.shopping_basket), title: Text("Meus pedidos") ), BottomNavigationBarItem( icon: Icon(Icons.favorite), title: Text("Favoritos") ), ], ), ); } } ``` Também vamos definir que o corpo da nossa página (propriedade `body`) irá exibir a primeira página da lista `_telas` que acabamos de criar. [ ![Flutter - Widgets de Layout](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/flutter.svg) Curso Flutter - Widgets de Layout Conhecer o curso ](https://www.treinaweb.com.br/curso/flutter-widgets-de-layout) Como exemplo, vamos utilizar uma página chamada `NewPageScreen` que recebe um texto como parâmetro e o exibe ao centro da tela: ```java class NewPageScreen extends StatelessWidget { final String texto; NewPageScreen(this.texto); @override Widget build(BuildContext context) { return Container( child: Center( child: Text(texto), ), ); } } ``` Com isso, o resultado será o seguinte: ![Páginas de navegação prontas](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/paginas-navegacao-prontos.png) ## Navegando entre páginas Agora que já possuímos toda a estrutura necessária (barra de navegação e páginas), já podemos realizar a navegação em nosso app. Como dito anteriormente, o `BottomNavigationBar` utiliza uma lista de páginas para navegação (lista `_telas` criada anteriormente). Sendo assim, precisamos alterar o índice desta lista quando clicarmos sobre as opções da barra de navegação. Para isso, o primeiro passo é criar uma variável para controlar este índice, como podemos ver abaixo: ```java class _HomeScreenState extends State { int _indiceAtual = 0; // Variável para controlar o índice das telas final List _telas = [ NewPageScreen("Minha conta"), NewPageScreen("Meus pedidos"), NewPageScreen("Favoritos") ]; ... ``` Feito isso, o próximo passo é criar um método que recebe o índice do item clicado na barra de navegação e salva na variável `_indiceAtual` : ```java class _HomeScreenState extends State { ... void onTabTapped(int index) { setState(() { _indiceAtual = index; }); } } ``` Agora, basta chamarmos este método quando clicarmos sobre alguma das opções do `BottomNavigationBar` e alterar o índice da página que será exibida como corpo da página: ```java class _HomeScreenState extends State { ... @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: _telas[_indiceAtual], //Alterando posição da lista bottomNavigationBar: BottomNavigationBar( currentIndex: _indiceAtual, onTap: onTabTapped, //Chamando método ao clicar em uma das opções ... ``` Finalmente, ao realizar todas as alterações, o código final da página principal pode ser visto abaixo: ```java import 'package:flutter/material.dart'; import 'package:flutter_app/new_page.dart'; class HomeScreen extends StatefulWidget { @override _HomeScreenState createState() => _HomeScreenState(); } class _HomeScreenState extends State { int _indiceAtual = 0; final List _telas = [ NewPageScreen("Minha conta"), NewPageScreen("Meus pedidos"), NewPageScreen("Favoritos") ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: _telas[_indiceAtual], bottomNavigationBar: BottomNavigationBar( currentIndex: _indiceAtual, onTap: onTabTapped, items: [ BottomNavigationBarItem( icon: Icon(Icons.person), title: Text("Minha conta") ), BottomNavigationBarItem( icon: Icon(Icons.shopping_basket), title: Text("Meus pedidos") ), BottomNavigationBarItem( icon: Icon(Icons.favorite), title: Text("Favoritos") ), ], ), ); } void onTabTapped(int index) { setState(() { _indiceAtual = index; }); } } ``` O resultado da execução do código acima pode ser visto abaixo: ![Projeto com BottomNavigation finalizado](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/projeto-finalizado.gif) - [ #dart ](https://www.treinaweb.com.br/blog/tag/dart) - [ #flutter ](https://www.treinaweb.com.br/blog/tag/flutter) Autor ![Fagner Pinheiro](//secure.gravatar.com/avatar/e622f7c7d686a0b11f8d977ce9725b67?d=mm) ## Fagner Pinheiro Professor na TreinaWeb e graduado em Sistemas de Informação pelo Instituto Federal da Bahia. Apaixonado por desenvolvimento web, desktop e mobile desde os 12 anos de idade. Já utilizou todos os sistemas operacionais possíveis, mas hoje se contenta com o OSX instalado em seu desktop. Quando não está trabalhando, é IGL e Awper do time de CS:GO da Treinaweb. Até passou em uma peneira do Cruzeiro, mas preferiu estudar Python. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/fagner-pinheiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/criando-um-drawer-navigator-com-flutter-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 6 anos atrás ## [ Criando um drawer navigator com Flutter ](https://www.treinaweb.com.br/blog/criando-um-drawer-navigator-com-flutter) Veja neste artigo como criar um drawer navigator com Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/04/LAYOUT-FLUTTER-RESPONSIVO-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 5 anos atrás ## [ Como construir um layout Flutter responsivo ](https://www.treinaweb.com.br/blog/como-construir-um-layout-flutter-responsivo) Neste artigo veremos algumas das abordagens e widgets que são usados no desenvolvimento de aplicativos responsivos com Flutter . Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/05/Criando_componente_snackbar_com_JavaScript_e_CSS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ Criando componente snackbar com JavaScript e CSS ](https://www.treinaweb.com.br/blog/criando-componente-snackbar-com-javascript-e-css) Nesse artigo, você irá ter o passo a passo de como criar um componente de snackbar do zero. Sendo capaz de adapta-lo como preferir. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/Criando_mascara_monetaria_com_expressoes_regulares-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando máscara monetária com expressões regulares ](https://www.treinaweb.com.br/blog/criando-mascara-monetaria-com-expressoes-regulares) Nesse artigo aprenderemos a criar uma máscara para inputs que irá deixar seus projetos mais profissionais utilizando as expressões regulares. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Criando CRUD com Prisma ORM e NestJS ](https://www.treinaweb.com.br/blog/criando-crud-com-prisma-orm-e-nestjs) Neste artigo vamos implementar um CRUD com Prisma ORM e NestJS, abordando as principais operações básicas com o banco de dados. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/02/criando-componentes-tailwindcss-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Criando componentes com Tailwind CSS ](https://www.treinaweb.com.br/blog/criando-componentes-com-tailwind-css) Neste artigo veremos por que os componentes nos ajudam durante o desenvolvimento do nosso projeto e como conseguimos criá-los com Tailwind CSS Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/07/CRIANDO-PRIMEIRO-CRUD-COM-NESTJS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Criando o primeiro CRUD com NestJS ](https://www.treinaweb.com.br/blog/criando-o-primeiro-crud-com-nestjs) Neste artigo veremos como criar um CRUD com NestJS, o passo a passo utilizando ferramentas como o TypeORM e o banco de dados SQLite. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/03/o-que-e-fastapi-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Criando o primeiro CRUD com FastAPI ](https://www.treinaweb.com.br/blog/criando-o-primeiro-crud-com-fastapi) Neste artigo nós iremos aprender um pouco mais sobre o FastAPI durante o desenvolvimento de uma API com todas as operações de CRUD. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/01/criando-uma-api-com-spring-data-jpa-e-spring-web-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 5 anos atrás ## [ Criando uma API com Spring Data JPA e Spring Web ](https://www.treinaweb.com.br/blog/criando-uma-api-com-spring-data-jpa-e-spring-web) Neste artigo vamos aprender como criar uma API com persistência de dados utilizando o Spring Web MVC e o Spring Data JPA. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/criando-a-estrutura-de-um-layout-com-css-grid-e-flexbox.png-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Criando a estrutura de um Layout com CSS Grid e Flexbox ](https://www.treinaweb.com.br/blog/criando-a-estrutura-de-um-layout-com-css-grid-e-flexbox) Nesse artigo vamos aprender sobre as funcionalidades CSS Grid e FlexBox do CSS na pratica durante o desenvolvimento de layout. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/ROTAS-EXPRESS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ Criando Rotas com Express.js ](https://www.treinaweb.com.br/blog/criando-rotas-com-express-js) Vamos aprender a configurar rotas com o Express.js, com exemplos utilizando as requisições GET, POST, PUT e DELETE. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **12h 43min 17s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58