Función customModal

Parámetros:

• BuildContext context: Contexto de construcción del widget padre.
• String? title: Título del modal (opcional).
• List<Widget> Function(BuildContext, void Function(void Function())) body: Función que devuelve una lista de widgets que se mostrarán en el cuerpo del modal. Esta función toma dos parámetros:
  • BuildContext modalContext: Contexto de construcción del modal.
  • void Function(void Function()) setModalState: Función para establecer el estado del modal. Puede ser útil para realizar cambios en el estado del modal desde dentro de los widgets mostrados en el cuerpo.

Ejemplo de uso

Ejemplo sencillo

En el siguiente ejemplo, se crea un modal con un título y un cuerpo que solo contiene un texto y un botón para cerrar el modal.

void showModal() {
  customModal(
    context,
    title: 'Titulo del modal',
    body: (modalContext, setModalState) {
      return [
        Text('Este es el cuerpo del modal'),
        const SizedBox(height: 10),
        ElevatedButton(
          onPressed: () {
            Navigator.pop(modalContext);
          },
          child: const Text('Cerrar modal'),
        ),
      ];
    },
  );
}

Ejemplo con State

El siguiente ejemplo muestra el uso del setModalState del modal para actualizar el body sin tener que recrear el modal.

void showModal() {
  int count = 0;
  customModal(
    context,
    title: 'Titulo del modal',
    body: (modalContext, setModalState) {
      return [
        Center(
          child: FilledButton(
            onPressed: () {
              setModalState(() => count++);
            },
            child: Text('Contador: $count'),
          ),
        )
      ];
    },
  );
}