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.
Criando estrutura da tela
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:
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
);
}
}
Curso
Flutter - Fundamentos
Conhecer o curso
Este widget retornará uma página similar à imagem abaixo:
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:
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
drawer: Drawer(
),
);
}
}
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:
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
accountEmail: Text("user@mail.com"),
accountName: Text("Seu zé"),
currentAccountPicture: CircleAvatar(
child: Text("SZ"),
),
),
],
),
),
);
}
}
Curso
Flutter - Widgets de Layout
Conhecer o curso
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:
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
UserAccountsDrawerHeader(
accountEmail: Text("user@mail.com"),
accountName: Text("Seu zé"),
currentAccountPicture: CircleAvatar(
child: Text("SZ"),
),
),
ListTile(
leading: Icon(Icons.person),
title: Text("Minha conta"),
onTap: () {
Navigator.pop(context);
//Navegar para outra página
},
),
ListTile(
leading: Icon(Icons.shopping_basket),
title: Text("Meus pedidos"),
onTap: () {
Navigator.pop(context);
//Navegar para outra página
},
),
ListTile(
leading: Icon(Icons.favorite),
title: Text("Favoritos"),
onTap: () {
Navigator.pop(context);
//Navegar para outra página
},
),
],
),
),
);
}
}
É 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:
