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
│ │ ├── results.html
│ └── static (directory)
│ └── custom.css
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, 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.
<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 %}
{{ message }}
{% endfor %}
{% endif %}
{% endwith %}
</body>
Better yet, you can style the flash message.
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.
<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 alter-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 view, something like this.
flash('Sorry. There were no results with your search. Try again?')
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 }} alter-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 