☰ 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.

🧱 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:

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.

↔️ 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.