浏览器选项卡在加载 Flutter Web 应用程序时显示项目名称

Question

我正在创建一个 Flutter Web 应用程序。当它启动并下载 Flutter 内容时，浏览器中的选项卡显示项目名称而不是应用程序名称。这看起来很难看。

我的项目名称是com.example.my_app_client，但我的应用程序名称是我的应用程序。

如何更改浏览器选项卡文本以显示 "My App"？

我找到了答案，我将其添加到下面作为问答式的自我回答。

Answer 1

您的项目中有一个名为 web 的顶级文件夹。打开该文件夹中的 index.html 文件，您应该会看到类似于以下内容的内容：

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>

将标题文本更改为您的应用名称：

<title>My App</title>

这将在加载 Flutter 应用程序时显示正确的标题。

Answer 2

您还可以在 MaterialApp 小部件上使用 title 属性，这对我有用

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title:'Your Title',
      home: HomePage(),
      theme: appTheme(),
    );
  }
}

Answer 3

您可以编辑 web/manifest.json 文件。

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

在此之后再次构建应用程序并在隐身选项卡中打开它或清除浏览数据

浏览器选项卡在加载 Flutter Web 应用程序时显示项目名称

Browser tab shows project name while Flutter Web app loading

dart

flutter

flutter-web