Browser tab shows project name while Flutter Web app loading

I'm creating a Flutter Web app. When it is starting up and downloading the Flutter content the tab in the browser displays the project name instead of the app name. This looks ugly.

My project name is com.example.my_app_client, but my app name is My App.

How do I change the browser tab text to show "My App"?

I found the answer and I am adding it below as a Q&A style self answer.

Solution

There is a top level folder called web inside your project. Open the index.html file in that folder and you should see something similar to the following:

web/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>my_app_client</title>
</head>
<body>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

Change the title text to your app name:

<title>My App</title>

This will then show the correct title while the Flutter app is loading.