Criando um drawer navigator com Flutter - Blog da TreinaWeb Criando um drawer navigator com Flutter - Blog da TreinaWeb
Dart Flutter Criando um drawer navigator com Flutter
Fagner Pinheiro 3 de setembro de 2020
Um dos principais widgets de navegação em aplicativos mobile é o Drawer Navigator. Basicamente, o DrawerNavigator é um componente lateral utilizado para exibir links para páginas do aplicativo e, em alguns casos, exibir informações do usuário. No Flutter, este componente é muito utilizado para esta navegação. Sendo assim, neste artigo veremos como criar um drawer navigator em aplicativos Flutter.
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, BottomNavigationBar e, claro, o DrawerNavigation. Sendo assim, a primeira coisa que temos que fazer é definir que nosso aplicativo irá retornar um widget do tipo Scaffold:
Adicionando Drawer
Agora que já temos a estrutura da página que iremos utilizar, já podemos adicionar o Drawer em nosso aplicativo. Para isso, precisamos definir a propriedade drawer no widget Scaffold:
Este código criará um ícone localizado no canto superior esquerdo do aplicativo que, ao ser clicado, abrirá uma barra lateral. É esta barra que vamos utilizar para adicionar os links de navegação:
Adicionando informações do usuário
Como dito anteriormente, além dos links de navegação do aplicativo, podemos adicionar informações sobre a conta do usuário no Drawer. Para isso, basta adicionarmos, dentro de uma ListView, o widget UserAccountsDrawerHeader com as informações de email, nome e imagem do usuário:
accountEmail: Text("user@mail.com"),
accountName: Text("Seu zé"),
child: Text("SZ"),
O código acima adicionará as informações do usuário no topo do Drawer do aplicativo, como podemos ver na imagem abaixo:
Adicionando links de navegação
Vimos que a principal utilidade de um DrawerNavigation é exibir links para navegação entre as páginas do aplicativo. Para isso, cada link pode ser adicionado em um ListTile. Este widget permite que adicionemos um ícone, o nome da página e um método que será executado quando o link for clicado.
Para isso, depois de definirmos os dados do usuário, adicionamos um ListTile para cada ícone que quisermos adicionar ao Drawer:
title: Text("Minha conta"),
//Navegar para outra página
leading: Icon(Icons.shopping_basket),
title: Text("Meus pedidos"),
leading: Icon(Icons.favorite),
title: Text("Favoritos"),
É recomendado que cada ícone, ao ser clicado, primeiro execute o método pop do Navigator para que o drawer feche e, posteriormente, navegue para a página de destino. Com isso, o resultado final do nosso Drawer pode ser visto na imagem abaixo: