Login/Register
Browser tab shows project name while Flutter Web app loading
Asked Answered
Solved flutterdartflutter-web
G

4

8

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.

enter image description here

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.

Greggrega answered 20/4, 2020 at 4:5 Comment(0)
G
11

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.

enter image description here

Greggrega answered 20/4, 2020 at 4:5 Comment(1)
This answer is only partially correct: The HTML title tag value is overridden by MateralApp : onGenerateTitle: (BuildContext context) => AppLocalizations.of(context)!.appTitle, – Kalvin
E
4

You can also use the title property on the MaterialApp widget, this is what worked for me

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title:'Your Title',
      home: HomePage(),
      theme: appTheme(),
    );
  }
}
Expansion answered 17/1, 2021 at 8:9 Comment(1)
While this is a good place to set your title, it won't show until the app loads, which is what this problem is about. See the Suragch 's answer. – Retinol
F
3

If you want it to show while loading the screen use the index.html method as answered before by Suragch

If you want it to show after the screen loads use the Material App method as answered by 6thsage

If you want both, just use both

Below is the while loading screen method explained

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:

Below is the after-loading screen method explained

My App This will then show the correct title while the Flutter app is loading. 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title:'Your Title',
      home: HomePage(),
      theme: appTheme(),
    );
  }
}
Fatsoluble answered 26/9, 2022 at 17:40 Comment(1)
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Parity
V
1

You can edit the web/manifest.json file.

{
    "name": "<App name>",
    "short_name": "<App short name>",
    "description": "<Your app description>",
    // something else
}

after this build the app again and open it in incognito tab or clear browsing data

Vallery answered 28/10, 2021 at 11:49 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.