Mensajes Flash en Flask: Guía Completa

  Mensajes Flash

Los mensajes flash (Message flashing) son una forma elegante de enviar mensajes de retroalimentación al usuario entre solicitudes en Flask. Son especialmente útiles para mostrar mensajes de éxito, error o información después de una redirección.

¿Qué son los Mensajes Flash?

  Mensajes Flash

  • Son mensajes temporales que se almacenan en la sesión
  • Se borran automáticamente después de mostrarlos
  • Ideales para feedback después de acciones del usuario
  • Persisten durante redirecciones

Requisitos Previos

python 
from flask import Flask, flash, redirect, render_template, url_for

Configuración Básica

En esta sección, configuramos Flask para manejar mensajes flash y definimos rutas de ejemplo. La aplicación se inicializa con app.secret_key, clave necesaria para enviar mensajes flash, y dos rutas:

  • /(inicio): Muestra la plantilla principal y envía un mensaje flash de prueba.
  • /demo-flash: Envía varios mensajes flash de diferentes categorías (success, info, warning, error) y luego redirige al inicio para mostrarlos.
python 
# Importando Flask y algunos paquete de Flask entre ellos flash
from flask import Flask, flash, render_template, redirect, url_for

# Instanciando la clase Flask
app = Flask(__name__)
# Necesario para usar mensajes flash
app.secret_key = '454ghgghfg8h9fghjnrjtr'

@app.route('/', methods=['GET'])
def inicio():
# Enviando mensajes flash de atipo success a la plantilla index.html
flash('Mensaje de prueba', 'success')
return render_template("index.html")

# Ruta para enviar mensajes flash
@app.route('/demo-flash', methods=['GET'])
def demo_flash():
  flash('Mensaje de Success con Flash', 'success')
  flash('Mensaje de Info con Flash', 'info')
  flash('Mensaje de Warning con Flash', 'warning')
  flash('Mensaje de Error con Flash', 'error')
  return redirect(url_for('inicio'))
   
   
# Corriendo la app 
if __name__ == '__main__':
  app.run(debug=True, port=5000)

Mostrar los Mensajes en la Plantilla HTML

Esta sección muestra los mensajes flash en la plantilla. Se utiliza get_flashed_messages(with_categories=True) para recuperar los mensajes junto con sus categorías. Si hay mensajes, se generan elementos de lista <li> que utilizan la categoría como clase CSS, permitiendo aplicar estilos específicos a cada tipo de mensaje.

html 
<!-- base.html -->
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Message Flashing en Flask</title>
  <!-- Opcional, para diferenciar los mensajes -->
  <style>
    * {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .success {
      color: green;
    }
    .error {
      color: red;
    }
    .info {
      color: blue;
    }
    .warning {
      color: orange;
    }
  </style>
</head>
<body>
  <h2>Hola, Flask.</h2>

  <!-- Mostrar mensajes flash -->
  {% with messages=get_flashed_messages(with_categories=True) %}
    <!-- Validando si hay mensajes flash -->
    {% if messages %}
      <ul>
        <!-- Recorriendo los mensages, mas la categoria a la cual pertenecen -->
        {% for category, message in messages %}
          <!-- Usa la categoría como clase CSS para personalizar el estilo -->
          <li class="{{ category }}">{{ message }}</li>
        {% endfor %}
      </ul>
    {% endif %}
  {% endwith %}
</body>
</html>

En este punto, solo falta que visites las siguientes URL para probar la aplicación:

python 
http://127.0.0.1:5000/

http://127.0.0.1:5000/demo-flash

Mensajes Flash en Flask con Bootstrap

Cuando trabajamos con Flask, los mensajes flash nos ayudan a proporcionar retroalimentación instantánea al usuario. Estos mensajes temporales aparecen solo una vez, lo que los hace perfectos para notificaciones tras redirecciones o acciones del usuario, como envíos de formularios. Usar Bootstrap para estos mensajes mejora mucho su apariencia y experiencia de usuario, ya que ofrece estilos predefinidos para diferentes tipos de mensajes (success, info, warning, danger).

Código de Flask

python 
# Importando Flask y algunos paquete de Flask entre ellos flash
from flask import Flask, flash, render_template, redirect, url_for

# Instanciando la clase Flask
app = Flask(__name__)
# Necesario para usar mensajes flash
app.secret_key = '454ghgghfg8h9fghjnrjtr'

@app.route('/')
def inicio():
flash('Mensaje de Success con Flash', 'success')
flash('Mensaje de Info con Flash', 'info')
flash('Mensaje de Warning con Flash', 'warning')
flash('Mensaje de Error con Flash', 'error')
flash('Hola de Danger con Flash', 'danger') 
return render_template("index.html")
   
   
# Corriendo la app 
if __name__ == '__main__':
  app.run(debug=True, port=5000)

Plantilla HTML

html 
<!-- base.html -->
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mensajes Flash en Flask</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
</head>
<body>
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-12">
        <h1>Mensajes Flash en Flask</h1>
      </div>
    </div>

    <div class="row justify-content-center">
      <div class="col-12">
        <!-- Mostrar mensajes flash -->
        {% with messages=get_flashed_messages(with_categories=True) %}
          {% if messages %}
            {% for category, message in messages %}
              <!-- Usamos las clases de Bootstrap para las alertas -->
              <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
            {% endfor %}
          {% endif %}
        {% endwith %}
      </div>
    </div>
  </div>

  <!-- Bootstrap JS Opcional -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-2xjAWviLddX9YMeAuUE60c3t+hckx2WgUz9o0Mi27Fr7X1s1ghcXFDx72yUIWQGs" crossorigin="anonymous"></script>
  <!--  
  Script JS opcional para hacer desaparecer los mensajes flash despues de 3 segundos
    -->
  <script>
    // static/js/flash.js
    document.addEventListener('DOMContentLoaded', function () {
      setTimeout(function () {
        let alerts = document.querySelectorAll('.alert')
        alerts.forEach(function (alert) {
          alert.style.opacity = '0'
          setTimeout(function () {
            alert.remove()
          }, 3000)
        })
      }, 3000)
    })
  </script>
</body>
</html>
  Nota

  • Obtiene los mensajes flash: Usa get_flashed_messages(with_categories=True) para obtener una lista de mensajes con sus categorías (como success, info).
  • Verifica si hay mensajes: Si existen mensajes, se crea un ciclo for para recorrer cada uno.
  • Muestra cada mensaje: Cada mensaje se coloca en un div con clases de Bootstrap (alert y alert-{{ category }}) para darle estilo.
  • Botón de cierre: Se añade un botón (btn-close) que permite al usuario cerrar la alerta.
  • Script Adicional: Un script opcional se añade al final para hacer que las alertas desaparezcan automáticamente después de 3 segundos, mejorando la experiencia del usuario al eliminar mensajes obsoletos de forma suave.

Mensajes Flash con Timeout

  Tips y Trucos

Este código JavaScript añade un efecto de desvanecimiento a los mensajes flash. Después de 3 segundos, disminuye la opacidad de cada alerta a 0 y las elimina del DOM tras medio segundo. Se ejecuta una vez que el contenido del documento ha cargado completamente.

javascript 
// static/js/flash.js
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
      let alerts = document.querySelectorAll('.alert');
      alerts.forEach(function(alert) {
          alert.style.opacity = '0';
          setTimeout(function() {
              alert.remove();
          }, 500);
      });
  }, 3000);
});