Como crear un AlertDialog en Flutter

En la mayoría de aplicaciones, tanto para Android como para IOS, es necesario mostrar alertas a los usuarios debido a eventos que ocurren en la aplicación y que requieren de una atención especial del usuario. 

Esto se realiza mediante un componente llamado en Flutter AlertDialog. En las siguientes líneas vamos a ver cómo crear un AlertDialog en Flutter y las diferentes opciones que posee.

Para los que han desarrollado en Android, esta funcionalidad es la misma que ofrece la clase Dialog en sus diferentes formas, AlertDialog, DialogFragment, etc… Para los que son más de IOS, esta funcionalidad nos la da la clase UIAlertController.

En Flutter podemos mostrar el AlertDialog con la apariencia de la UI de Android o de IOS, existen las dos formas aunque el manejo de las clases a utilizar y las opciones son prácticamente las mismas.

ejemplo de alertDialog en Flutter tanto para IOS como para Android

En la captura anterior podéis ver los dos casos, en la primera utilizando la estética de Material – Android – y en la segunda la de IOS.

Creando un AlertDialog en Flutter

La creación del AlertDialog en Flutter la podemos dividir en dos partes o dicho de otra forma, son necesarios dos pasos:

  • Primero creamos la alerta en sí, donde damos el valor al título, al mensaje, los botones que van a existir en la alerta.
  • En segundo lugar invocamos a esta alerta y la mostramos al usuario.

El código para la creación del primer paso sería como sigue.

Widget _buildAlertDialog() {
    return AlertDialog(
      title: Text('Notificaciones'),
      content:
          Text("¿Desea recibir notificaciones? Serán muy pocas de verdad :)"),
      actions: [
        FlatButton(
            child: Text("Aceptar"),
            textColor: Colors.blue,
            onPressed: () {
              Navigator.of(context).pop();
            }),

        FlatButton(
            child: Text("Cancelar"),
            textColor: Colors.red,
            onPressed: () {
              Navigator.of(context).pop();
            }),
      ],
    );
  }

Aquí es donde vamos diferenciar si la alerta la deseamos crear con la estética de Material Design, Android, o estética de IOS. Existen dos clases: AlertDialog y CupertinoAlertDialog

  Widget _buildCupertinoAlertDialog() {
    return CupertinoAlertDialog(
      title: Text('Notificaciones'),
      content:
          Text("¿Desea recibir notificaciones? Serán muy pocas de verdad :)"),
      actions: [
        FlatButton(
            child: Text("Aceptar"),
            textColor: Colors.blue,
            onPressed: () {
              Navigator.of(context).pop();
            }),

        FlatButton(
            child: Text("Cancelar"),
            textColor: Colors.red,
            onPressed: () {
              Navigator.of(context).pop();
            }),
      ],
    );
  }

Estas clases admiten por constructor una serie de parámetros que son con los que configuramos la alerta mostrar. Entre los parámetros básicos están:

  • title: Es un Widget donde setearemos el título de la alerta.
  • content: De nuevo tenemos la opción de añadir un Widget para crear el contenido de nuestra alerta. Al ser un Widget nos abre la posibilidad de incluir aquí prácticamente cualquier contenido que deseemos.
  • actions: Este parámetro que acepta una lista de Widgets es donde meteremos los botones que mostrará la alerta y el evento correspondiente que deseemos ejecutar cuando se pulse en cualquiera de ellos.
  • backgroundColor: El propio nombre deja claro para que es este parámetro. Este parámetro solo es aplicable en la clase AlertDialog, en la de Cupertino no está permitido.
  • shape: Gracias a este parámetro podremos customizar la alerta con diferentes opciones, bordes curvos, diferentes tipos de líneas en el borde, grosores, etc… Este parámetro solo es aplicable en la clase AlertDialog, en la de Cupertino no está permitido.
  • elevation: para fijar una elevación en la coordenada z a la alerta. Este parámetro solo es aplicable en la clase AlertDialog, en la de Cupertino no está permitido.

Los tres primeros son los parámetros comunes en ambos tipos de Dialogo y después dependiendo de si queremos que nuestra app tenga un aspecto más fiel a la estética de IOS o a la estética de Android, existirán una serie de propiedades que solo son compatibles con uno u otro. En la documentación está bastante claro.

Una vez tenemos la alerta creada, solo nos queda mostrarla. Para mostrarla tenemos que invocar a la función showDialog. Esta función la podemos invocar desde cualquier parte de nuestro código y le pasamos una serie de parámetros necesarios como son el contexto y un WidgtBuilder, que no es más que una función que devuelva un Widget. Justo lo que hemos creado en el paso anterior. 

Veamos el código.

  Future _showMyDialog(BuildContext context) async {
    return showDialog(
      context: context,
      builder: (_) => _buildAlertDialog(),
    );
  }
 Future _showMyDialog(BuildContext context) async {
    return showCupertinoDialog(
      context: context,
      builder: (_) => _buildAlertDialog(),
    );
  }

La diferencia entre el primero el segundo caso es la forma en cómo se muestra la alerta. Las animaciones, el degradado del background, son diferentes asemejándose a cómo se realiza de forma nativa en cada sistema operativo.

Todo el código fuente del ejemplo lo tenéis en Github.

Comparte si lo consideras interesante
  •  
  •  
  •  
  •  
  •  
  •  
  •  

1 thought on “Como crear un AlertDialog en Flutter

  1. Elder says:

    Excelente ejemplo, muy entendible para iniciados como yo. Sigue adelante!.

    Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.