15

我开始了Flutter web，我想将 Material 图标添加到我的 Flutter Web 应用程序中，但改为显示框。

在此处输入图像描述

任何帮助表示赞赏。谢谢

4

5 回答 5

11

来自flutter_web 存储库：

注意：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 在此处下载，将其放在您的assets文件夹中并相应地更新您的FontManifest.json。

于 2019-05-10T03:40:41.417 回答
10

根据这个 你可以直接添加Material图标，FontManifest.json如下图所示。

[
  {
    "family": "MaterialIcons",
    "fonts": [
      {
        "asset": "https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"
      }
    ]
  }
]
于 2019-06-21T15:39:25.570 回答
0

这解决了我的问题：构建 Web 输出后，查看文件夹 build/web/assets/fonts。如果有一个文件名为：MaterialIcons-Regular。otf然后将其添加到 pubspec.yaml：

- family: MaterialIcons
  fonts:
    - asset: fonts/MaterialIcons-Regular.otf

和 FontManifest.json（在路径 web/assets/FontManifest.json 中）：

{
"family": "MaterialIcons",
"fonts": [
  {
    "asset": "fonts/MaterialIcons-Regular.otf"
  }
]

}

注意字体文件的格式。是otf不是ttf

于 2022-01-27T08:15:17.887 回答
0

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

于 2021-06-09T20:20:34.890 回答
0

只要确保

uses-material-design: true

pubspec.yaml与资产/图像并行存在

于 2020-09-26T09:08:15.973 回答