Flask - Message Flashing

0 796

Introduction

In Flask, message flashing provides a way to show one-time notifications to users. Whether it's confirming a successful action or alerting an error, flash messages are a clean and temporary way to inform users after an event like a form submission or login.

Why Flash Messages?

Flash messages improve the user experience by providing immediate feedback. They are session-based, meaning they display once and then disappear, keeping your interface clean without storing messages long-term.

Basic App Setup

Let's begin by setting up a simple Flask app. A secret key is required to use the session system for flashing messages.

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

app = Flask(__name__)
app.secret_key = 'your_secret_key'  # Required for flashing

Flashing a Message

Use the flash() function to create a message. You can optionally assign it a category, such as "success", "error", or "info".

@app.route('/submit', methods=['POST'])
def submit():
    # Logic here
    flash('Form submitted successfully!', 'success')
    return redirect(url_for('home'))

Displaying Flash Messages in HTML

Add this block to your HTML template to show flashed messages dynamically:

<!-- In your base.html or any other template -->
{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    <ul>
      {% for category, message in messages %}
        <li class="{{ category }}">{{ message }}</li>
      {% endfor %}
    </ul>
  {% endif %}
{% endwith %}

Styling Flash Messages

You can use categories to apply different styles using CSS or Bootstrap classes. Here’s a basic example using plain CSS:

/* styles.css */
.success { color: green; }
.error { color: red; }
.info { color: blue; }

Complete Example

Here's a full working example of flashing messages when a form is submitted:

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

app = Flask(__name__)
app.secret_key = 'mysecret'

@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        name = request.form.get('name')
        if name:
            flash(f'Hello, {name}!', 'success')
        else:
            flash('Please enter your name.', 'error')
        return redirect(url_for('home'))
    return render_template('index.html')

HTML Form Template

<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head><title>Flash Example</title></head>
<body>

  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      <ul>
        {% for category, message in messages %}
          <li class="{{ category }}">{{ message }}</li>
        {% endfor %}
      </ul>
    {% endif %}
  {% endwith %}

  <form method="POST">
    <input type="text" name="name" placeholder="Enter your name">
    <button type="submit">Submit</button>
  </form>

</body>
</html>

Conclusion

Flask - Message Flashing is an essential feature that enhances user interaction by providing timely, temporary feedback. Whether you're confirming a success or highlighting an error, flash messages can make your application more user-friendly and responsive.

If you’re passionate about building a successful blogging website, check out this helpful guide at Coding Tag – How to Start a Successful Blog. It offers practical steps and expert tips to kickstart your blogging journey!

For dedicated UPSC exam preparation, we highly recommend visiting www.iasmania.com. It offers well-structured resources, current affairs, and subject-wise notes tailored specifically for aspirants. Start your journey today!