Construindo um Navigation Drawer em Flutter

Um dos componentes de navegação mais utilizados em aplicativos é o Navigation Drawer. Através desse componente, o usuário pode navegar entre as telas e acessar as diversas funcionalidades da aplicação. Aqui no blog, eu já demonstrei como implementar e customizar o Navigation Drawer para Android. Dessa vez, farei a mesma implementação, porém com foco no Flutter.

Vamos ao projeto! =]

A implementação do Navigation Drawer em Flutter não exige nenhuma biblioteca externa. O próprio Flutter já contém as classes e métodos necessários para o desenvolvimento de um app contendo esse componente. Sendo assim, o primeiro passo será adicionar um widget Scaffold à nossa implementação.

Uma das características do Scaffold é suportar o uso de componentes do Material Design, como AppBars, SnackBars e Drawer. Dessa forma, o Scaffold possui uma propriedade chamada drawer, na qual será inserido o nosso Navigation Drawer. Para isso, utilizaremos a classe Drawer, a qual será utilizada na montagem e inserção dos itens de navegação.

Para que o nosso Navigation Drawer seja capaz de “rolar verticalmente”, caso o número de itens seja grande, inseriremos um ListView como widget filho do Drawer. Feito isso, podemos começar a implementar os itens. Esses itens devem ser widgets, ou seja, você é livre para “desenhá-los” como quiser. Porém, nesse exemplo, usaremos o DrawerHeader e o ListTile na montagem dos nossos itens.

No código acima é possível notar que o DrawerHeader serve como base para a implementação de um cabeçalho para o Navigation Drawer, ao qual foi atribuída a cor azul de fundo. Por outro lado, o ListTile é usado na construção dos itens, devendo ter um título e, ao ser selecionado, executará o que for implementado na função onTap. No caso do código acima, na função onTap, foi inserida a linha Navigator.pop(context);, a qual tem o objetivo de fechar o Navigation Drawer quando o item for selecionado.

Com os itens já prontos, podemos partir para a implementação de mudanças de tela quando um item for selecionado. Para isso, criaremos um novo arquivo chamado “fragment.dart”, o qual conterá uma classe nomeada de Fragment. Essa classe será invocada cada vez que uma mudança de tela for executada.

Como precisaremos saber qual item foi selecionado, usaremos uma variável _selectedIndex para armazenar o índice. Além disso, criaremos dois métodos: _getDrawerItem e _onSelectItem. O _getDrawerItem tem como objetivo retornar o Fragment de acordo com o item selecionado. Por sua vez, o método _onSelectItem serve para atualizar a variável _selectedIndex e redesenhar a tela através da chamada ao método setState de acordo com o índice passado como parâmetro.

O código final do arquivo “main.dart” pode ser visto abaixo:

O gif abaixo mostra o funcionamento do Navigation Drawer que implementamos neste post:

 

Bom, é isso.

Espero que esse post tenha te ajudado a entender como um Navigation Drawer pode ser implementado em Flutter.

O código do projeto desenvolvido neste post pode ser visto no seguinte link: https://github.com/luizmarcus/Flutter/tree/master/navigation_drawer

Qualquer dúvida, deixa um comentário.