Flaskを用いたメッセージフラッシングの実装ができない

前提・実現したいこと

Flaskでメッセージフラッシングの機能を実装しようとしています。
Flashingに関するFlask公式ドキュメントをそのまま実行しています。

発生している問題・エラーメッセージ

公式ドキュメントの「Simple Flashing」をそのままファイルに書いて実行すると
ブラウザで何も表示されないという問題が発生しました。
Google Chrome バージョン: 77.0.3865.120（Official Build）（64 ビット）です。

ターミナルも更新しても以下のように表示されるだけで、特にエラーメッセージも出ません。

$ FLASK_APP=app.py FLASK_DEBUG=true flask run
 * Serving Flask app "app.py" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 232-439-885
127.0.0.1 - - [18/Oct/2019 18:56:47] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [18/Oct/2019 18:56:53] "GET / HTTP/1.1" 200 -

該当のソースコード

Flashingに関するFlask公式ドキュメントのそのままです。

実行の際にターミナルに打ち込んだコマンド

$FLASK_APP=app.py FLASK_DEBUG=true flask run

app.py

python
1from flask import Flask, flash, redirect, render_template, request, url_for
2
3app = Flask(__name__)
4app.secret_key = b'_5#y2L"F4Q8z\n\xec]/'
5
6@app.route('/')
7def index():
8	return render_template('index.html')
9
10@app.route('/login', methods=['GET', 'POST'])
11def login():
12	error = None
13	if request.method == 'POST':
14		if request.form['username'] != 'admin' or request.form['password'] != 'secret':
15			error = 'Invalid credentials'
16	else:
17		flash('You were successfully logged in')
18		return redirect(url_for('index'))
19	return render_template('login.html', error=error)

以下のhtmlファイルは、app.pyと同じ階層のtemplatesというフォルダにまとめて入れています。
layout.html

html
1<!doctype html>
2<title>My Application</title>
3{% with messages = get_flashed_messages() %}
4  {% if messages %}
5    <ul class=flashes>
6    {% for message in messages %}
7      <li>{{ message }}</li>
8    {% endfor %}
9    </ul>
10  {% endif %}
11{% endwith %}

index.html

html
1{% extends "layout.html" %}
2{% block body %}
3  <h1>Overview</h1>
4  <p>Do you want to <a href="{{ url_for('login') }}">log in?</a>
5{% endblock %}

html
1{% extends "layout.html" %}
2{% block body %}
3  <h1>Login</h1>
4  {% if error %}
5    <p class=error><strong>Error:</strong> {{ error }}
6  {% endif %}
7  <form method=post>
8    <dl>
9      <dt>Username:
10      <dd><input type=text name=username value="{{
11          request.form.username }}">
12      <dt>Password:
13      <dd><input type=password name=password>
14    </dl>
15    <p><input type=submit value=Login>
16  </form>
17{% endblock %}

試したこと

htmlファイルに問題があることは分かったのですが、公式ドキュメントに書かれているコードをどのように書き換えればブラウザでメッセージフラッシングを確認できるのか分からず困っています。

補足情報（FW/ツールのバージョンなど）

Python 3.6.0
Flask 1.1.1

行動規範の内容に同意します

回答1件

ベストアンサー

参考にされているサイトの「layout.html」です。

html
1<!doctype html>
2<title>My Application</title>
3{% with messages = get_flashed_messages() %}
4  {% if messages %}
5    <ul class=flashes>
6    {% for message in messages %}
7      <li>{{ message }}</li>
8    {% endfor %}
9    </ul>
10  {% endif %}
11{% endwith %}
12{% block body %}{% endblock %}