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.
Muito obrigado Luiz, suas dicas/tutoriais estão me ajudando muito no aprendizado.
Comecei a trabalhar com web e agora, estou aprendendo flutter para desenvolver app também, e suas dicas estão me ajudando nesse ponta pé inicial. Mal posso esperar para as próximas dicas…
De nada, Paulo!
Vou estudando e compartilhando aquilo que aprendo. Que bom que estou podendo ajudar. =]
Assim que der, farei novos posts.
Boa tarde! Sou iniciante…Como faço para inserir uma imagem de cabeçalho e outra de background nesse código?
E ae blz?
Segue a implementação que você pediu no link abaixo:
https://gist.github.com/luizmarcus/b0aebb70716fd4225d932b8123c51588
Coloquei uma imagem como background do cabeçalho e outra como background do drawer.
Espero ter ajudado.