1
resposta

[Dúvida] Como utilizar BottomNavigationBar

Estou realizando um projeto seguindo o que foi ensinado nos 3 primeiros cursos de Flutter da formação e preciso navegar entre telas utilizando uma BottomNavigationBar, mas a implementação dessa navegação entre as telas já prontas está muito difícil. Alguém consegue me ajudar a como implementaria da melhor forma possível essa navegação? Tenho 3 telas prontas e quero navegar entre elas. Desde já agradeço!!!

1 resposta

Olá Nathan, tudo bem?

Para utilizar o BottomNavigationBar em seu projeto Flutter, você pode seguir os seguintes passos:

  1. Adicione o BottomNavigationBar ao Scaffold da sua tela principal:
Scaffold(
  body: _telas[_indiceAtual],
  bottomNavigationBar: BottomNavigationBar(
    currentIndex: _indiceAtual,
    onTap: (indice) {
      setState(() {
        _indiceAtual = indice;
      });
    },
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Tela 1',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.search),
        label: 'Tela 2',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: 'Tela 3',
      ),
    ],
  ),
);
  1. Crie uma lista com as suas telas:
final List<Widget> _telas = [
  Tela1(),
  Tela2(),
  Tela3(),
];
  1. Crie as suas telas:
class Tela1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Tela 1'),
    );
  }
}

class Tela2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Tela 2'),
    );
  }
}

class Tela3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Tela 3'),
    );
  }
}

Dessa forma, você poderá navegar entre as suas telas utilizando o BottomNavigationBar. Lembre-se de adaptar o código para as suas necessidades.

Espero ter ajudado e bons estudos!