如何为 Flutter Web 应用程序设置标题和图标？

Question

我想做的是构建一个 flutter web 应用程序，当在浏览器中显示时，选项卡会显示一个图标和一个标题（因为目前它只显示世界图标和本地主机...标题).

实际结果：

期望的结果：

编辑：我现在可以添加标题，因为这是在主函数中设置的

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: Icon(Icons.menu, color: Colors.white,),
      title: Text(_your title here_),
    )
    ...
  );
}

所以，我唯一需要编辑的是网站图标

Answer 1

假设您已经有一个 favicon.ico 文件，将它放在 your_project_dir\web 文件夹中 index.html 旁边，如下所示足以让浏览器选择它。

以下是放置 favicon.ico' in theweb` 文件夹的结果。确保进行干净的构建。

在其他情况下，您可以使用 index.html 中的 link 标签手动提及它，如本维基百科 page.

中所述

Answer 2

为了将标题更改为您想要的，您需要将参数 title（这是一个 String）添加到您的 MaterialApp 小部件。

return MaterialApp(
  title: "MyTitle", 
  home: MyHomeWidget());

Answer 3

您可以设置 onGenerateTitle property of your MaterialApp 小部件，并提供回调函数来构建您的标题。每次 WidgetsApp 重建时都会调用 onGenerateTitle 回调。如果您希望页面标题动态更改或生成本地化标题，这将很有用。

MaterialApp(
  ...
  onGenerateTitle: (BuildContext context) {
    return AppLocalizations.of(context).myTitle;
  }
  ...
);

Answer 4

编辑标题

这是最简单的。只需在每个页面上或直接在 materialApp 构造函数中使用 Title 小部件，并将标题字符串键设置为您需要的标题文本。像这样：

...
Title(
  color: myColors, //not  important  in web but still required
  title: 'web  page title',
  child: myChildWidget,
),
...

编辑图标

如果您的应用仅适用于网络，请使用 dart:html 库使用 DOM 访问权限执行更改。像这样

import 'dart:html';
...
...
updateIcon(String assetIcon){
      LinkElement link = (document.querySelector("link[rel*='icon']") ??
          document.createElement('link')) as LinkElement;
      link.type = 'image/x-icon';
      link.rel = 'shortcut icon';
      link.href = assetIcon;
}

如果您的应用程序是 multi-platform，您需要为 Web 创建单独的主文件，例如 main_web.dart.并在此文件中声明上一个函数。现在，在任何需要设置图标的地方，您只需在使用关键字 kIsWeb.

检查平台后调用该方法即可

例如：更改页面内的图标

...
initState(){
    super.initSate();
    if(kIsWeb){
      WebMixin.updateIcon("assets/home_icon.png"); //WebMixin is just a helper.  replace  it by your  one.
    }
}
...

Answer 5

如果您想知道如何更改设备主页上的应用名称，您可以更新 web/manifest.json 中的“名称”和“short_name”值：

"name": "Ideasky",
"short_name": "Ideasky",

如何为 Flutter Web 应用程序设置标题和图标？

How can you set title and icon for a flutter web app?

flutter

flutter-web