Flash is a way to display a sort of pop up message. In this example, "no results" flash is displayed.
Flask uses the MVC (Model View Controller) Framework. Just to make this as obvious as possible, I like my Flask apps to have the following.
- Model -> models.py
- View -> views.py
- Controller -> __init__.py
And let's say your Flask app has the following structure.
├── main.py
├── my-project (directory)
│ ├── __init__.py
│ ├── views.py
│ ├── templates (directory)
│ │ ├── base.html
│ │ ├── home.html
Flash requires SECRET_KEY which is almost always defined in your contoller file __init__.py.
from flask import Flas
def app():
app = Flask(__name__)
app.config['SECRET_KEY'] = abc123
return app
At the bare minimum, one of your HTML pages could have something like this.
base.html could have something like this. Almost always, this markup would be placed after your top nav bar markup and before {% block content %} {% endblock %}.
AVOID TROUBLE
In this example, I'm using Bootstrap version 5.2.3, and I have both bootstrap.min.css and bootstrap.bundle.min.js. Both are needed so that the flash is styled properly and the X button can be used to close the flash message.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<p>Hello</p>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
{{ message }}
{% endfor %}
{% endif %}
{% endwith %}
<p>World</p>
</body>
</html>
Better yet, you can style the flash message.
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-dismissable fade show" style="color: white; background-color: black; margin-bottom: 0;">
<div class="container" style="text-align: center;">
{{ message }}
<button type="button" class="btn-close btn-close-white" aria-label="Close" data-bs-dismiss="alert"></button>
</div>
</div>
{% endfor %}
{% endif %}
{% endwith %}
</body>
In this bare minimum example, you would include flash in your route, something like this.
from flask import Blueprint, render_template, flash
foo = Blueprint('demo', __name__)
@foo.route('/bar')
def bar():
flash("flash test")
return render_template('bar.html')
Be aware that if you clear session after flash, this may cause the flash message to not appear.
from flask import Blueprint, render_template, flash
foo = Blueprint('demo', __name__)
@foo.route('/bar')
def bar():
session.clear() # <= session.clear() should be OK and should not cause the message to not flash
flash("flash test")
session.clear() # <= session.clear() after flash may cause flash to be cleared thus no message will be flashed
return render_template('bar.html')
Including Categories
O, base.html could have something like this. In this example, alert-success could be used to display a flash message with a green background color and alert-primary could be used to display a blue background color. In this scenario, you would pass in category with a value of "primary" or "success" to display a green or blue background.
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }} alert-dismissable fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="alert"></button>
</div>
{% endfor %} {% endif %} {% endwith %}
In this example, you would include "category" in your flash message.
flash('Sorry. There were no results with your search. Try again?', category='primary')
Markup can be used if you want to include HTML in the flash message.
flash(Markup('Sorry. There were no results with your search. Try again? Or <a href="/ContactUs">Contact Us</a>'))
And here is how you would use both Markup and category.
flash(Markup('Sorry. There were no results with your search. Try again? Or <a href="/ContactUs">Contact Us</a>'),category='primary')
You will need to import the Markup module.
from flask import Blueprint, render_template, request, redirect, flash, url_for, Markup
Including variables
Python f-string can be used to include variables in the flash message.
flash(f'Sorry {firstname}. There were no results with your search. Try again?'),category='primary')
Did you find this article helpful?
If so, consider buying me a coffee over at 