📄 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. |
📌 Panel fixo
Dentro do Scaffold, por exemplo:
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.
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:
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:
