Flash is a way to display a sort of pop up message. In this example, "no results" flash is displayed when the search returns no results.

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
├── database (directory)
│   ├── example.db
├── my-project (directory)
│   ├── __init__.py
│   ├── views.py
│   ├── models.py
│   ├── templates (directory)
│   │   ├── base.html
│   │   ├── home.html
│   │   ├── results.html
│   └── static (directory)
│       └── custom.css

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.

{% 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 %}

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

Or, ​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')