7.9. Navegação e roteamento em Flutter: Navegação com bottom navigation bar

Um dos aspectos mais cruciais do desenvolvimento de aplicativos é a capacidade de navegar entre diferentes telas e seções. No Flutter, essa funcionalidade é fornecida por meio do conceito de roteamento e navegação. Neste contexto, vamos focar em um dos componentes mais comuns usados para navegação - o Bottom Navigation Bar.

O Bottom Navigation Bar é uma barra de navegação horizontal que geralmente é colocada na parte inferior de um aplicativo. Ele permite que os usuários alternem entre diferentes seções do aplicativo com um único toque. Esta barra de navegação inferior é comumente usada em aplicativos de grande escala, onde a navegação entre diferentes seções é necessária.

Como implementar a navegação com Bottom Navigation Bar

Para implementar a navegação com Bottom Navigation Bar no Flutter, primeiro precisamos definir uma barra de navegação inferior em nosso aplicativo. Para fazer isso, podemos usar o widget BottomNavigationBar do Flutter. Este widget recebe uma lista de itens (BottomNavigationBarItem) que representam as diferentes seções do aplicativo.

Primeiro, precisamos definir um estado para o índice da página atual. Este estado será alterado cada vez que um novo item for selecionado na barra de navegação inferior.

int _currentIndex = 0;

Em seguida, definimos a lista de páginas que representam as diferentes seções do aplicativo. Cada página é representada por um widget.

final List _pages = [
  HomePage(),
  SearchPage(),
  ProfilePage(),
];

Em seguida, definimos a barra de navegação inferior dentro do método build do widget principal. Aqui, definimos os itens da barra de navegação inferior e lidamos com a lógica de alteração de página quando um item é selecionado.

BottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile',
    ),
  ],
),

Finalmente, exibimos a página atual no corpo do widget principal. Usamos o estado _currentIndex para determinar qual página exibir.

body: _pages[_currentIndex],

Conclusão

A navegação com Bottom Navigation Bar é uma parte essencial do desenvolvimento de aplicativos no Flutter. Ela permite que os usuários alternem facilmente entre diferentes seções do aplicativo, melhorando a experiência do usuário. Com o Flutter, a implementação da navegação com Bottom Navigation Bar é fácil e direta, graças ao widget BottomNavigationBar e à flexibilidade do sistema de roteamento do Flutter.

Para criar aplicativos mais complexos e avançados, você pode combinar a navegação com Bottom Navigation Bar com outras técnicas de roteamento e navegação, como navegação por gaveta, navegação por guias e navegação por pilha. Isso permitirá que você crie aplicativos com uma navegação mais rica e uma experiência de usuário mais envolvente.

Em conclusão, a navegação e o roteamento são aspectos cruciais do desenvolvimento de aplicativos Flutter, e o domínio desses conceitos é essencial para se tornar um desenvolvedor Flutter competente.

Próxima página do Ebook Gratuito:

95Navegação e roteamento em Flutter: Navegação com pageview

3 minutos