Criando um BottomNavigationBar com Flutter

Assim como o DrawerNavigator, 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 e, claro, o BottomNavigationBar. Sendo assim, a primeira coisa que temos que fazer é definir que nosso aplicativo irá retornar um widget do tipo Scaffold:

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @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.

Curso Flutter - Fundamentos

Conhecer o curso

Este widget retornará uma página similar à imagem abaixo:

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:

class _HomeScreenState extends State<HomeScreen> {

  @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:

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.

class _HomeScreenState extends State<HomeScreen> {
  final List<Widget> _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.

Curso Flutter - Fundamentos

Conhecer o curso

Como exemplo, vamos utilizar uma página chamada NewPageScreen que recebe um texto como parâmetro e o exibe ao centro da tela:

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:

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:

class _HomeScreenState extends State<HomeScreen> {
  int _indiceAtual = 0; // Variável para controlar o índice das telas
  final List<Widget> _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 :

class _HomeScreenState extends State<HomeScreen> {
  ...

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:

class _HomeScreenState extends State<HomeScreen> {
  ...

  @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:

import 'package:flutter/material.dart';
import 'package:flutter_app/new_page.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _indiceAtual = 0;
  final List<Widget> _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: