Menu
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.
476
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.
129
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(),
);
}
}
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
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
