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

Posted

技术标签:

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

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

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

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

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

【问题讨论】：

【参考方案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

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

【讨论】：

以上是关于浏览器选项卡在 Flutter Web 应用加载时显示项目名称的主要内容，如果未能解决你的问题，请参考以下文章

Flutter Web 在托管时卡在 Http 请求上 - 在本地工作正常

Flutter Web 卡在白屏

Flutter应用程序在使用flutter_driver运行时无法加载Json文件

如何使用检查器在 Safari 上调试 Flutter Web App？

Bootstrap嵌套导航选项卡在重新加载时不会打开相同的选项卡

Flutter 中的 StreamBuilder 卡在 ConnectionState.waiting 中并且只显示加载标记