Mostrar un AlertDialog al presionar un Boton en Flutter

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

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

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”