AlertDialog

AlertDialog en Flutter

El AlertDialog es un widget que te permite mostrar una alerta o un diálogo al usuario. Sirve para mostrar mensajes importantes, solicitar confirmación, o presentar opciones al usuario.

¿Cómo se usa?

Para mostrar un AlertDialog, utilizamos la función showDialog y pasamos como argumento el contexto y el propio AlertDialog.

Dart

import 'package:flutter/material.dart';

void showMyDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title:    Text('Alerta'),
        content:    Text('¿Estás seguro de continuar?'),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text('Cancelar'),
          ),
          TextButton(
            onPressed: () {
              // Acción a realizar si el usuario confirma
              print('¡Confirmado!');
              Navigator.pop(context);
            },
            child: Text('Aceptar'),
          ),
        ],
      );
    },
  );
}

Explicación del código:

• showDialog: Muestra el diálogo modal.
• AlertDialog: Define el contenido del diálogo.
• title: El título del diálogo.
• content: El cuerpo del diálogo.
• actions: Una lista de botones que se muestran en la parte inferior del diálogo.
• Navigator.pop: Cierra el diálogo.

Personalizando el AlertDialog

Puedes personalizar el AlertDialog de muchas maneras:

• Cambiando el título y el contenido: Utiliza diferentes widgets de texto, imágenes o cualquier otro widget que desees.
• Agregando más botones: Puedes incluir tantos botones como necesites para diferentes acciones.
• Cambiando el estilo: Utiliza las propiedades de ThemeData para personalizar el aspecto del diálogo.
• Agregando un campo de texto: Si necesitas que el usuario ingrese algún dato, puedes agregar un TextField.

Ejemplo más completo:

Dart

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('Ingresa tu nombre'),
      content: TextField(
        decoration: InputDecoration(hintText: 'Tu nombre'),
        onChanged: (value) {
          // Hacer algo con el valor ingresado
        },
      ),
      actions: [
        TextButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Cancelar'),
        ),
        TextButton(
          onPressed: () {
            // Obtener el valor del TextField y realizar alguna acción
            Navigator.pop(context);
          },
          child: Text('Aceptar'),
        ),
      ],
    );
  },
);

Otros tipos de diálogos:

• CupertinoAlertDialog: Para una apariencia más similar a iOS.
• SimpleDialog: Para diálogos más complejos con múltiples opciones.