Contido:
Flutter ofrece varios mecanismos para informar, confirmar ou solicitar accións ao usuario, como diálogos emerxentes, mensaxes temporais ou paneis despregables desde abaixo.
💬 AlertDialog #
Un AlertDialog é unha ventá emerxente que bloquea a interacción ata que o usuario tome unha decisión. Pódese usar para avisos, confirmacións ou preguntas.
- Normalmente inclúe un título, contido (como unha mensaxe ou widgets) e un conxunto de accións (botóns) que o usuario pode realizar.
- O usuario debe interactuar co
AlertDialogpara poder continuar.
📝 Nota: Para amosar un
AlertDialog, empregamos a funciónshowDialog().
🧪 Exemplo: Diálogo con botóns #
ElevatedButton(
onPressed: () {
showDialog(
context: contexto,
builder: (contexto) {
return AlertDialog(
title: Text('Confirmación'),
content: Text('Seguro que queres continuar?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(contexto),
child: Text('Cancelar'),
),
ElevatedButton(
onPressed: () {
print('Confirmado');
Navigator.pop(contexto);
},
child: Text('Aceptar'),
),
],
);
},
);
},
child: Text('Amosar diálogo'),
)
🧪 Outro exemplo #
🍫 SnackBar #
Un SnackBar é unha mensaxe breve e non intrusiva que aparece na parte inferior da pantalla durante uns segundos.
- É ideal para ofrecer un feedback rápido ao usuario sobre unha operación que se acaba de realizar (por exemplo, “Elemento gardado”, “Conexión perdida”) sen bloquear a interacción coa aplicación.
- As
SnackBardesaparecen automaticamente despois duns segundos ou cando o usuario interactúa coa pantalla.
📝 Nota: Para amosar unha
SnackBar, usamosScaffoldMessenger.of(context).showSnackBar().
🧪 Exemplo: Amosar unha mensaxe #
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(contexto).showSnackBar(
SnackBar(
content: Text('Operación realizada con éxito!'),
duration: Duration(seconds: 3),
action: SnackBarAction(
label: 'Desfacer',
onPressed: () {
print('Acción desfeita');
},
),
),
);
},
child: Text('Amosar SnackBar'),
)
🧪 Outro exemplo #
📥 showModalBottomSheet #
Un BottomSheet é un panel que se desliza dende a parte inferior da pantalla para amosar contido adicional. Pode ser:
- Modal. Bloquea a interacción co resto da aplicación mentres está visible
- Persistente. Permanece visible mentres o usuario segue interactuando co resto da pantalla.
📝 Nota:
- Aquí centrarémonos en
showModalBottomSheet, que é modal e máis axeitado para seleccións ou accións contextuais que non requiren un diálogo completo.- É útil para presentar unha lista de opcións, un formulario rápido ou información complementaria sen cambiar de pantalla por completo.
🧪 Exemplo: Panel inferior modal #
ElevatedButton(
onPressed: () {
showModalBottomSheet(
context: contexto,
builder: (contexto) {
return Container(
padding: EdgeInsets.all(16),
height: 200,
child: Column(
children: [
Text('Selecciona unha opción:', style: TextStyle(fontSize: 18)),
ListTile(
leading: Icon(Icons.settings),
title: Text('Configuración'),
onTap: () {
Navigator.pop(contexto);
print('Configuración seleccionada');
},
),
ListTile(
leading: Icon(Icons.logout),
title: Text('Saír'),
onTap: () {
Navigator.pop(contexto);
print('Saíndo da sesión');
},
),
],
),
);
},
);
},
child: Text('Abrir panel inferior'),
)
