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

Question

我要做的是构建一个颤动的网络应用程序，当它显示在浏览器中时，该选项卡会显示一个图标和一个标题（目前它只显示世界图标和 localhost...标题）。

实际结果：

期望的结果：

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

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

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

Answer 1

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

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

Answer 2

假设您已经有一个favicon.ico 文件，将其放在your_project_dir\web 文件夹中，如下所示，与index.html 并列，足以让浏览器拾取它。

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

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

Answer 3

您可以设置MaterialApp 小部件的onGenerateTitle 属性，并提供回调函数来构建您的标题。每次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;
}

如果您的应用程序是多平台，您需要为网络创建单独的主文件，例如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.
    }
}
...