El AlertDialog es un widget que muestra una especie de modal, que viene siendo un diálogo de alerta, que sirve para alertar al usuario sobre ciertas acciones importantes que requieren su atención y confirmación.
AlertDialog
Son cuadros de diálogo que se sobreponen a la pantalla actual de la aplicación bloqueando o desactivando las funciones de la pantalla para que el usuario enfoque su atención en el mismo.
Contenido de AlertDialog
Los AlertDialog en Flutter están compuestos por un título, un contenido y unas acciones.
titlees una propiedad opcional y el valor es un widget.contentes una propiedad requerida y el valor es un widget.actionses una lista de acciones opcionales y su valor es una lista de widgets, por lo general, botones.
Uso de AlertDialog
Para usar un AlertDialog normalmente se realiza enviándose dentro de una función que brinda Flutter para mostrar diálogos encima del contenido actual en una aplicación, con animaciones para mostrar y ocultar el diálogo. Esta función es showDialog . Para los casos que se necesite mostrar un cuadro de diálogo para elegir entre varias opciones, se recomienda usar SimpleDialog .
SimpleDialog
Permite al usuario elegir entre varias opciones. Tiene un título opcional seguido de las opciones a elegir. El uso es igual al de AlertDialog, se llama la función showDialog y se envía como parámetro el SimpleDialog.
showDialog
Un showDialog tiene como parámetros requeridos context y builder . Además de otras propiedades. Esta función recibe por parámetro un AlertDialog o SimpleDialog y se encarga de mostrarlos en la aplicación.
contextes de tipo BuildContext, es decir, el contexto actual.builderes un widget que por lo general crea un diálogo, en este caso un AlertDialog.barrierDismissiblese utiliza para indicar si al tocar la barrera se cierra el cuadro de diálogo.
consideraciones al usar showDialog
- Cuando se abre un diálogo, Flutter usa un widget que impide la interacción del usuario con el contenido detrás del diálogo. Este widget es ModalBarrier.
- El widget devuelto por el
builderque para este caso es AlertDialog, no comparte contexto con el widget detrás de él o de dónde se llame el diálogo. Para estos casos es recomendable usar un StatefulWidget o StatefulBuilder, si necesitamos que el diálogo se actualice.
Ejemplos
SimpleDialog
showDialog(
context: context,
builder: (context) {
return SimpleDialog(
title: const Text('SimpleDialog básico'),
children: [
SimpleDialogOption(
onPressed: () {},
child: const Text('Opción 1'),
),
SimpleDialogOption(
onPressed: () {},
child: const Text('Opción 2'),
)
],
);
},
);
AlertDialog
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('AlertDialog básico'),
content: const Text(
'Podemos colocar información representativa\n'
'para indicar al usuario\n'
'cuál es el fin de las acciones\n'
'que tiene para realizar.',
),
actions: [
TextButton(
style: TextButton.styleFrom(
textStyle: Theme.of(context).textTheme.labelLarge,
),
child: const Text('Cancelar'),
onPressed: () {
Navigator.of(context).pop();
},
),
TextButton(
style: TextButton.styleFrom(
textStyle: Theme.of(context).textTheme.labelLarge,
),
child: const Text('Aceptar'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
Evidencia
Conclusión
Para terminar, los cuadros de diálogo son importantes para el usuario a la hora de dar indicaciones sobre los flujos actuales. Si queremos usarlo para darle al usuario la oportunidad de elegir entre varias opciones, se recomienda el uso de SimpleDialog en cualquier otro caso se recomienda AlertDialog .
¡¡¡Gracias por leer este artículo!!!