Drawer
O Drawer é um componente muito comum em aplicativos móveis, usado para criar um menu lateral (ou menu de navegação) acessível deslizando da borda da tela. No Flutter, você pode criar um Drawer facilmente e adicioná-lo ao seu aplicativo.
Aqui está um exemplo básico de como criar um Drawer:
Scaffold(
appBar: AppBar(
title: Text('Título do App'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'Cabeçalho do Drawer',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Página Inicial'),
onTap: () {
// Lógica quando o item do Drawer é pressionado
Navigator.pop(context); // Fecha o Drawer
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Configurações'),
onTap: () {
// Lógica quando o item do Drawer é pressionado
Navigator.pop(context); // Fecha o Drawer
},
),
],
),
),
body: Center(
child: Text('Conteúdo da Página'),
),
)
Neste exemplo, o Drawer é adicionado ao Scaffold usando a propriedade drawer. O Drawer contém um ListView que contém itens do menu (representados como ListTile). O DrawerHeader é usado para mostrar um cabeçalho personalizado no topo do Drawer.
Cada ListTile no ListView representa um item de menu no Drawer. O leading é usado para adicionar um ícone à esquerda do texto do item do menu. O onTap é usado para definir a lógica quando um item do menu é pressionado. No exemplo acima, simplesmente fecha o Drawer usando Navigator.pop(context).
O Drawer é uma maneira eficaz de fornecer navegação e opções adicionais aos usuários em seu aplicativo Flutter. Você pode personalizar ainda mais o conteúdo e o estilo do Drawer de acordo com as necessidades do seu aplicativo.