Criando um drawer navigator com Flutter

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 - Fundamentos

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: