Crear un modal en Flutter con 2 botones

Hoy hablamos sobre cómo crear un modal en Flutter con dos botones de opción, cancelar y confirmar, te dejo una función lista, para integrar en tus proyectos rápidamente y te explico lo que hacemos para que no te pierdas de nada.

Recientemente, he estado trabajando en un proyecto de aplicación móvil multiplataforma.

La elección tomada fue Flutter por su simplicidad y el gigante detrás de esta tecnología.

En este proyecto he tenido que experimentar mucho con esta tecnología, por lo que próximamente estaré subiendo más snippets de código.

¿Necesitas aprender algo nuevo ? Ve a Udemy, busca el tema del que quieres aprender, selecciona el curso para ti y continua con tu aprendizaje.

Udemy

Hoy les hablaré un poco sobre una funcionalidad que recientemente tuve que implementar y que creo es muy necesaria en cualquier proyecto.

Veremos como crear un modal en Flutter con dos botones de acción: cancelar y eliminar.

Por supuesto puedes cambiar estas opciones, pues la estructura es la misma, puedes hacer por ejemplo un cancelar y confirmar.

Como te he comentado antes he puesto el código en una función para que sea más fácil integrar en tus proyectos.

Solo debes de tomar en cuenta a partir del código del botón que abre el modal para llamar la función.

onPressed: () async {
            showConfirmDelete(context);
},

Lo único que hacemos es llamar a una función y mandar como parámetro nuestro contexto.

Ahora vemos la función principal de este post.

showConfirmDelete(BuildContext context) {
    Widget cancelButton = ElevatedButton(
      child: Text("Cancelar"),
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all<Color>(primarycolor),
        shape: MaterialStateProperty.all(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16),
          ),
        ),
      ),
      onPressed: () {
        print("Cancelando..");
        Navigator.of(context).pop();
      },
    );
    Widget continueButton = ElevatedButton(
      child: Text("Eliminar"),
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all<Color>(redcolor),
        shape: MaterialStateProperty.all(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16),
          ),
        ),
      ),
      onPressed: () {
        print("Eliminando..");
        // Otras acciones de eliminar
      },
    );
    // set up the AlertDialog
    AlertDialog alert = AlertDialog(
      title: Text("Eliminar cuenta"),
      content: Text("¿Estás seguro de eliminar permanentemente tu cuenta?"),
      actions: [
        cancelButton,
        continueButton,
      ],
    );
    // show the dialog
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }

Lo primero que hacemos es crear nuestros dos botones de acción: cancelar y eliminar.

Agregamos un pequeño estilo, en mi caso el botón de Eliminar lo he puesto en rojo.

Puedes notar que para simplemente salir del modal para por ejemplo el botón de cancelar usamos:

Navigator.of(context).pop();