Flutter - Usando o Navigation Drawer

Neste artigo veremos como usar o Navigation Drawer no Flutter.

O Flutter é um SDK de aplicativo móvel do Google que ajuda a criar aplicativos móveis modernos para iOS e Android usando uma única (quase) base de código.

Se você não conhece o Flutter veja o meu artigo :  Flutter - Primeiros contatos e impressões

Usando o Navigation Drawer

Eu já apresentei o Navigation Drawer neste artigo : Flutter - Material Design com Scaffold

E hoje veremos como definir um Navigation Drawer customizado em uma aplicação Flutter.

Criando o projeto Flutter

No Visual Studio Code tecle CTRL+ SHIFT+P para abrir a paleta de comandos e a seguir selecione a opção : Fluter:New Project;

A seguir informe o nome do projeto : flutter_demos e tecle ENTER;

Na janela de diálogo a seguir selecione a pasta onde o projeto vai ser salvo e clique em :
Select a folder to create the project in;

O Flutter vai criar um projeto padrão onde todo o código da aplicação vai estar no arquivo main.dart dentro da pasta lib do projeto.

Vamos selecionar o arquivo main.dart e apagar todo o código gerado deixando o arquivo vazio.

A seguir inclua o código abaixo no arquivo main.dart para criar o leiaute padrão usando os Widgets MaterialApp e Scaffold onde já definimos um navigation drawer padrão:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor : Colors.blue
      ),
      home :  Scaffold(
        appBar: AppBar(
          title: Text("Ola Flutter"),
        ),
        body : Container (
          color: Colors.orange,
        ),
        drawer: Container(
          color: Colors.red,
        )
      )
    );
  }
}

 

Aqui estamos usando o drawer do scaffold e definindo um container, mas podemos usar qualquer widget aqui.

Agora note que por padrão o drawer ocupa a tela inteira quando expandido, assim o recomendado para que o drawer ocupe o tamanho correto é usar o widget Drawer do material.

Assim basta usar o código abaixo para ter um drawer com navegação no tamanho adequado:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor : Colors.blue
      ),
      home :  Scaffold(
        appBar: AppBar(
          title: Text("Usando Drawer"),
        ),
        body : Container (
          color: Colors.orange,
        ),
        drawer: Drawer(
        )
      )
    );
  }
}

 

Vamos a seguir definir no Navigation Drawer um widget ListView como widget filho e usar o ListTile para definir alguns itens simulando um menu com opções e ainda implementando o tratamento da ação do usuário via callback onTap() :

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor : Colors.blue
      ),
      home :  Scaffold(
        appBar: AppBar(
          title: Text("Usando Drawer"),
        ),
        body : Container (
          color: Colors.orange,
        ),
       drawer: Drawer(
          child: ListView(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.star),
                title: Text("Favoritos"),
                subtitle: Text("meus favoritos..."),
                trailing: Icon(Icons.arrow_forward),
                onTap: () {
                  debugPrint('toquei no drawer');
                }
               )
            ],
           )
        )
      )
    );
  }
}

Neste código retornamos um Drawer onde definimos como filho um widet ListView com um ListTile onde usamos as propriedades para definir ícones, texto e o callback onTap().

Como quando o drawer é acionado ele é colocado na pilha para recolher basta usar o código : 

 onTap: () {
      debugPrint('toquei no drawer');
      Navigation.pop(context); 
 }

Podemos ainda definir a navegação para outra rota:

 onTap: () {
  Navigator.of(context).pop();
  Navigator.of(context).push(MaterialPageRoute(
      builder: (BuildContext context) => NewPage("Pagina Dois")));
},

Podemos também usar o widget DrawerHeader que representa a região mais alta do drawer onde podemos definir um cabeçalho com texto e/ou imagens:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor : Colors.blue
      ),
      home :  Scaffold(
        appBar: AppBar(
          title: Text("Usando Drawer"),
        ),
        body : Container (
          color: Colors.orange,
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              DrawerHeader(
               child: Text('Drawer Header'),
                decoration: BoxDecoration(
                  color: Colors.cyan,
                  ),
              ),
              ListTile(
                leading: Icon(Icons.star),
                title: Text("Favoritos"),
                subtitle: Text("meus favoritos..."),
                trailing: Icon(Icons.arrow_forward),
                onTap: () {
                  debugPrint('toquei no drawer');
                }
               ),
               ListTile( 
                 leading: Icon(Icons.account_circle),
                 title: Text("Perfil"),
                 subtitle: Text("Perfil do usuário..."),
                 trailing: Icon(Icons.arrow_forward),
                onTap: () {
                  Navigator.pop(context);
                }
               )
            ],
           )
        )
      )
    );
  }
}

Para customizar ainda mais podemos usar o widget UserAccountDrawerHeader que permite exibir a identificação do usuário com texto e imagem:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primaryColor: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Usando Drawer"),
        ),
        body: Container(
          color: Colors.orange,
        ),
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              UserAccountsDrawerHeader(
                accountName: Text("Macoratti"),
                accountEmail: Text("macoratti@yahoo.com"),
                currentAccountPicture: CircleAvatar(
                  radius: 30.0,
                  backgroundImage: 
                NetworkImage(
'http://www.macoratti.net/imagens/pessoas/mac.jpg'),
                  backgroundColor: Colors.transparent,
                ),
              ),
              ListTile(
                  leading: Icon(Icons.star),
                  title: Text("Favoritos"),
                  subtitle: Text("meus favoritos..."),
                  trailing: Icon(Icons.arrow_forward),
                  onTap: () {
                    debugPrint('toquei no drawer');
                  }),
              ListTile(
                  leading: Icon(Icons.account_circle),
                  title: Text("Perfil"),
                  subtitle: Text("Perfil do usuário..."),
                  trailing: Icon(Icons.arrow_forward),
                  onTap: () {
                    Navigator.pop(context);
                  })
            ],
          ),
        ),
      ),
    );
  }
}

Para exibir apenas a primeira letra do nome do usuário podemos usar o código a seguir:

drawer: Drawer(
   child: ListView(
      children: <Widget>[
         UserAccountsDrawerHeader(
           accountName: Text("Macoratti"),
           accountEmail: Text("macoratti@yahoo.com"),
           currentAccountPicture: CircleAvatar(
             backgroundColor:
             Theme.of(context).platform == TargetPlatform.iOS
                   ? Colors.blue: Colors.white,
               child: Text("M", style: 
                    TextStyle(fontSize: 40.0),
                  ),
                ),
              ),
               ....
            ],
          ),
        )
...

Aqui estamos também verificando a plataforma de execução para definir a cor de fundo.

Pegue o projeto dos arquivos aqui: main_dart_drawer.dart

"E tu, ó menino, serás chamado profeta do Altíssimo, Porque hás de ir ante a face do Senhor, a preparar os seus caminhos;
Para dar ao seu povo conhecimento da salvação, Na remissão dos seus pecados;
Pelas entranhas da misericórdia do nosso Deus, Com que o oriente do alto nos visitou;"
 Lucas 1:76-78

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti