---
title: "☰ Menú lateral: Drawer"
description: "## ☰ Un menú lateral Moitas aplicacións teñen un botón **☰** na barra superior que permite abrir un menú con opcións como «Inicio», «Perfil» ou «Configuración». Este menú permanece oculto mentres non o necesitamos, polo que non ocupa espazo no…"
url: "https://www.drodicio.com/docs/flutter/tema-4-scaffold/drawer/"
updated: "2026-10-12"
category: Tema 4. Estrutura dunha pantalla. Scaffold
---

# ☰ Menú lateral: Drawer

## ☰ Un menú lateral

Moitas aplicacións teñen un botón **☰** na barra superior que permite abrir un menú con opcións como «Inicio», «Perfil» ou «Configuración». Este menú permanece oculto mentres non o necesitamos, polo que non ocupa espazo no contido da pantalla.

En Flutter, podemos crealo cun **`Drawer`**, un panel que se abre desde un lateral. Colocámolo na propiedade `drawer` do `Scaffold` e engadimos dentro as opcións que queremos ofrecer.

Se o `Scaffold` tamén ten unha `AppBar`, Flutter engade automaticamente o botón **☰**, sempre que non definamos un `leading` propio nin desactivemos `automaticallyImplyLeading`.

![Apertura do menú lateral Drawer](https://www.drodicio.com/wp-content/uploads/2026/10/drawer.png)
Apertura do menú lateral Drawer

| Elemento | Para que serve? |
| --- | --- |
| `Drawer` | O panel lateral. |
| `DrawerHeader` | Cabeceira do menú. |
| `ListTile` | Unha opción con texto, icona e callback `onTap`. |
| `Divider` | Separación visual entre opcións. |

### 🧱 Como organizamos o menú?

Unha forma habitual de crear un menú é colocar un `ListView` dentro do `Drawer`. Así, as opcións aparecen unha debaixo doutra e podemos desprazarnos se non caben na pantalla.

Dentro de `children`, colocamos:

1. **Un `DrawerHeader` ao principio:** mostra a cabeceira, por exemplo, co nome do centro ou do grupo.
2. **Un `ListTile` por opción:** pode incluír unha icona (`leading`), un texto (`title`) e a acción que se executa ao premer (`onTap`).
3. **Un `Divider` entre grupos de opcións, se fai falta:** debuxa unha liña para separalos visualmente. Non é necesario poñelo entre todas as opcións.

A estrutura sería esta:

```plain
Drawer
└── ListView
    ├── DrawerHeader → Cabeceira
    ├── ListTile → Primeira opción
    ├── Divider → Separación opcional
    └── ListTile → Segunda opción
```

No exemplo usamos `padding: EdgeInsets.zero` no `ListView` para eliminar o espazo que podería engadir automaticamente nos extremos da lista.

> 💡 Esta é unha organización habitual, non obrigatoria. Podemos crear un menú sen cabeceira ou sen separadores, segundo o que necesitemos.

## 🧪 Exemplo completo

Ao premer **☰**, abrimos o menú. Cada opción executa o seu callback `onTap`:

- **Inicio:** pecha o menú e deixa visible o contido da pantalla.
- **Consultar titor:** pecha o menú e mostra unha `SnackBar` co nome do titor.

Abrir o menú non fai que se peche automaticamente ao escoller unha opción. Por iso, dentro de cada `onTap`, escribimos `Navigator.pop(context)` para pechalo.

`Navigator` é a ferramenta de Flutter que utilizaremos para movernos entre pantallas no Tema 3.5. **Aquí só necesitamos saber que esta chamada pecha o menú que temos aberto**; aínda non estamos abrindo outra pantalla.

> 🔗 DartPad:
>
>
>
> - [`https://dartpad.dev/?id=a757214aaa5dd40cf8155c5fcc8d091d`](https://dartpad.dev/?id=a757214aaa5dd40cf8155c5fcc8d091d).

[https://dartpad.dev/embed-inline.html?id=a757214aaa5dd40cf8155c5fcc8d091d](https://dartpad.dev/embed-inline.html?id=a757214aaa5dd40cf8155c5fcc8d091d)

![Abrir o menú lateral e escoller entre Inicio e Consultar titor](https://www.drodicio.com/wp-content/uploads/2026/10/drawer_exemplo-scaled.png)
Abrir o menú lateral e escoller entre Inicio e Consultar titor

## ↔️ `drawer` e `endDrawer`

`drawer` aparece no lado inicial da lectura; `endDrawer`, no final. En galego corresponden á esquerda e á dereita. Podes usar `endDrawer` para un panel de opcións secundarias.

Máis adiante neste tema combinaremos o menú coa barra inferior. No Tema 3.5 veremos navegación entre pantallas e paso de datos.

> 📚 Consulta:
>
>
>
> - [Menú lateral → `https://docs.flutter.dev/cookbook/design/drawer`](https://docs.flutter.dev/cookbook/design/drawer).