Mostrar AlertDialog al presionar Boton Flutter

El AlertDialog en Flutter sirve para mostrar alertas, pueden ser informativas o alertas de error, veamos el siguiente ejemplo.

Este articulo es parte de la Guia Maestra para crear aplicaciones en Flutter →

Flutter es un framework para crear aplicaciones moviles usando el lenguaje Dart.

¿Qué es un AlertDialog?

En el ecosistema de Material Design, el AlertDialog se utiliza para situaciones donde el usuario debe confirmar una acción (como eliminar un registro) o recibir información crítica.

Anatomía del Widget

Un AlertDialog bien estructurado se compone de tres propiedades fundamentales:

1. Title (Título): Un widget (generalmente Text) que resume el propósito de la alerta en pocas palabras.
2. Content (Contenido): El cuerpo del mensaje donde se explican los detalles de la decisión. Puede contener texto, iconos o incluso layouts complejos.
3. Actions (Acciones): Una lista de widgets (normalmente TextButton) ubicados al final del diálogo. Por estándar de UX, suelen incluir una opción de “Cancelar” y otra de “Aceptar”.

El siguiente ejemplo parte de que ya tenemos todo el entorno de desarrollo de Flutter instalado en nuestro PC.

Primera Parte

La primera parte del codigo es la siguiente, este codigo debe ir en el archivo main.dart de nuestro proyecto.

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: HelloDialog(),
        ),
      ),
    );
  }
}

En esta primera parte, incluimos las librerias necesarias, creamos la funcion main/principal y creanmos el primer Widget que se va a ejecutar.

Es importante darse cuenta del formato que tienen las clases y Widgets en Flutter con eso se facilita mucho la programacion.

En este caso la clase MainApp tiene una funcion o metodo build que es la que construye los elementos visuales, en el parametro “home” que debe llevar Widgets, en este caso le pasamos como parametro la clase HelloDialog() que tambien es un Widget y lo explico en la siguiente parte.

Segunda Parte

Ahora vamos a hablar de la clase HelloDialog el codigo es el siguiente:

class HelloDialog extends StatelessWidget {
  const HelloDialog({super.key});
  @override
  Widget build (BuildContext context){
    return TextButton(
      onPressed: () =>showDialog<String>(
        context: context,
        builder: (BuildContext context) =>AlertDialog(
          title: const Text("Titulo del Dialogo"),
          content: const Text("Contenido del Dialogo"),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context, "Cancel"),
              child: const Text("Cancel")
            ),
            TextButton (
              onPressed: ()=> Navigator.pop(context, "Ok"),
              child: const Text("Ok"),
            )
          ]

        )
      ),
      child: const Text("Mostrar Dialogo")
    );
  }
}

Como puedes ver el codigo de esta clase, tambien tenemos el metodo “build” que construye los elementos visuales, ahora si en esta clase tenemos la creacion de nuestro AlertDialog.

En Flutter el metodo o funcion que se ejecuta al presionar los botones es “onPressed” a este parametro le podemos pasar la funcion que queremos que se ejecute.

El AlertDialog cuenta con 2 opciones o acciones que son Widgets.

Resultado

El resultado es el siguiente:

Este es el AlertDialog despues de presionar el Boton “Mostrar Dialogo”