Flutter Web未显示“材料设计”图标

Question

我启动了Flutter网站，我想向我的Flutter网站应用添加图标，但改为在其显示框中添加

。

欢迎任何帮助。谢谢

Answer 1

来自flutter_web repository：

注意：由于该来源中不包括相应的字体，因此特意省略了对MaterialIcons的引用。

如果将MaterialIcons-Extended.ttf添加到此目录，则可以按以下方式更新FontManifest.json：

[
  {
    "family": "MaterialIcons",
    "fonts": [
      {
        "asset": "MaterialIcons-Extended.ttf"
      }
    ]
  },
  {
    "family": "GoogleSans",
    "fonts": [
      {
        "asset": "GoogleSans-Regular.ttf"
      }
    ]
  },
  {
    "family": "GalleryIcons",
    "fonts": [
      {
        "asset": "GalleryIcons.ttf"
      }
    ]
  }
]

解决方案/解决方法

下载MaterialIcons-Regular.ttf here，将其放在您的assets文件夹中，并相应地更新FontManifest.json。

Answer 2

According to this 您可以如下所示将Material图标直接添加到FontManifest.json。

[
  {
    "family": "MaterialIcons",
    "fonts": [
      {
        "asset": "https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"
      }
    ]
  }
]

Answer 3

当您将文件上传到服务器时，请确保“assets”文件夹也已上传。因为文件是批量上传到服务器的，文件夹形式的文件没有上传，需要单独上传。

Answer 4

只需确保

uses-material-design: true

在pubspec.yaml中与资产/图片平行出现