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

【问题标题】：Browser tab shows project name while Flutter Web app loading浏览器选项卡在 Flutter Web 应用加载时显示项目名称
【发布时间】：2020-08-02 12:18:19
【问题描述】：

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

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

如何更改浏览器标签文本以显示“我的应用程序”？

我找到了答案，并将其添加到下面作为问答风格的自我答案。

【问题讨论】：

标签： flutter dart flutter-web

【解决方案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 应用加载时显示正确的标题。

【讨论】：

【解决方案2】：

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

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

【讨论】：

虽然这是设置标题的好地方，但在应用加载之前它不会显示，这就是问题所在。请参阅 Suragch 的答案。

【解决方案3】：

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

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

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

【讨论】：