---
title: 📄 Paneis inferiores
description: "## 📄 Dúas formas de mostrar un panel Un **panel inferior** (*bottom sheet*) é unha zona que aparece na parte baixa da pantalla para mostrar información ou accións adicionais, por exemplo, os datos dunha titoría. Pode permanecer visible mentres usamos…"
url: "https://www.drodicio.com/docs/flutter/tema-4-scaffold/paneis-inferiores/"
updated: "2026-10-12"
category: Tema 4. Estrutura dunha pantalla. Scaffold
---

# 📄 Paneis inferiores

## 📄 Dúas formas de mostrar un panel

Un **panel inferior** (*bottom sheet*) é unha zona que aparece na parte baixa da pantalla para mostrar información ou accións adicionais, por exemplo, os datos dunha titoría.

Pode permanecer visible mentres usamos a pantalla ou abrirse só cando prememos un botón. Neste apartado veremos estas dúas formas:

| Forma | Como se abre? | Como se comporta? |
| --- | --- | --- |
| `Scaffold.bottomSheet` | Declárase como parte da pantalla. | Permanece visible mentres o manteñamos nese parámetro. |
| `showModalBottomSheet` | Chámase desde unha acción. | Aparece por riba da pantalla e bloquea a interacción co fondo ata pechalo. |

![Comparación entre un panel inferior fixo e un panel modal](https://www.drodicio.com/wp-content/uploads/2026/10/bottomsheet.png)
Comparación entre un panel inferior fixo e un panel modal

## 📌 Panel fixo

Dentro do `Scaffold`, por exemplo:

```dart
bottomSheet: const SizedBox(
  height: 80,
  child: Center(child: Text('IES San Mamede · 2º DAM')),
),
```

Este panel pode tapar a parte inferior do `body`. Se reservamos unha altura fixa de 80 para o panel, podemos deixar ese espazo no contido mediante `Padding` con `EdgeInsets.only(bottom: 80)`, como no exemplo completo.

## 🪟 Panel modal

Un panel **modal** aparece por diante da pantalla. Mentres está aberto, non podemos utilizar os elementos que quedan detrás: primeiro debemos pechalo.

Para abrilo chamamos a `showModalBottomSheet` desde un callback, como `onPressed`. Indicamos:

- `context`: o contexto da pantalla desde a que abrimos o panel.
- `builder`: unha función que constrúe e devolve o contido do panel.

```dart
floatingActionButton: FloatingActionButton(
  child: const Icon(Icons.more_vert),
  onPressed: () {
    showModalBottomSheet(
      context: context,
      builder: (contextoPanel) => const Padding(
        padding: EdgeInsets.all(24),
        child: Text('Información da titoría de 2º DAM'),
      ),
    );
  },
),
```

## 🧪 Exemplo completo

> 💡 Sobre o exemplo:
>
>
>
> - `showModalBottomSheet<void>` indica que non esperamos recibir ningún dato ao pechar o panel.
> - Para pechalo co botón «Pechar», usamos `Navigator.pop(contextoPanel)`. Aquí pechamos o panel modal; veremos a navegación entre pantallas no Tema 3.5.
>
>
>
> 🔗 DartPad:
>
>
>
> - [`https://dartpad.dev/?id=6f4149e3549fff60a18d61bd7a468e88`](https://dartpad.dev/?id=6f4149e3549fff60a18d61bd7a468e88).

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

![Abrir e pechar o panel modal coa información da titoría](https://www.drodicio.com/wp-content/uploads/2026/10/bottomsheet_exemplo-scaled.png)
Abrir e pechar o panel modal coa información da titoría

`mainAxisSize: MainAxisSize.min` evita que a columna intente ocupar toda a altura. `SingleChildScrollView` permite desprazar o contido se non cabe.

| Opción de `showModalBottomSheet` | Para que serve? |
| --- | --- |
| `showDragHandle` | Mostra a pequena asa superior. |
| `isDismissible` | Permite pechar tocando fóra. |
| `enableDrag` | Permite arrastrar o panel cara abaixo para pechalo. |
| `isScrollControlled` | Permite deseños que necesitan máis altura, por exemplo con listas; non engade desprazamento por si só. |

Non é necesario combinar un panel fixo e outro modal en todas as aplicacións. Aquí aparecen xuntos para comparar as dúas opcións.

> 📚 Consulta:
>
>
>
> - [Panel modal → `https://api.flutter.dev/flutter/material/showModalBottomSheet.html`](https://api.flutter.dev/flutter/material/showModalBottomSheet.html).