Dart Flutter Criando um drawer navigator com Flutter

Veja neste artigo como criar 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.

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(),
    );
  }
}
Flutter - Fundamentos
Curso de Flutter - Fundamentos
CONHEÇA O CURSO

Este widget retornará uma página similar à imagem abaixo:

Estrutura da página do Widget 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:

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:

Navegação do Drawer no Flutter

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"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
Flutter - Widgets
Curso de Flutter - Widgets
CONHEÇA 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:

Informações dos usuários no DrawerNavigation

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:

Links de navegação no drawer

Deixe seu comentário

Conheça o autor desse artigo

  • Foto Autor Fagner Pinheiro
    Fagner Pinheiro

    Professor na TreinaWeb e graduado em Sistemas de Informação pelo Instituto Federal da Bahia. Apaixonado por desenvolvimento web, desktop e mobile desde os 12 anos de idade. Já utilizou todos os sistemas operacionais possíveis, mas hoje se contenta com o OSX instalado em seu desktop. Quando não está trabalhando, é IGL e Awper do time de CS:GO da Treinaweb. Até passou em uma peneira do Cruzeiro, mas preferiu estudar Python.

    Posts desse Autor

Artigos relacionados