我开始了Flutter web,我想添加材料图标到我的Flutter Web应用程序,但它的显示框代替。
Flutter web
任何帮助都很感激。谢谢
kmbjn2e31#
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.ttfhere,将其放入assets文件夹并相应地更新FontManifest.json。
MaterialIcons-Regular.ttf
assets
lymnna712#
According to this您可以直接将材质图标添加到FontManifest.json,如下所示。
[ { "family": "MaterialIcons", "fonts": [ { "asset": "https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2" } ] } ]
yk9xbfzb3#
只要确保
uses-material-design: true
以pubspec.yaml的形式与资产/图像并行存在
pubspec.yaml
irtuqstp4#
当您将文件上传到服务器时,请确保“assets”文件夹也已上传。因为文件是批量上传到服务器的,文件夹形式的文件不上传,所以应该单独上传。
2nbm6dog5#
这解决了我的问题:在生成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
zte4gxcn6#
在我的项目中,字体家族是在pubspec.yaml中定义的,没有大写字母,但我在代码中引用了它,以大写字母开头。这是没有问题的,只要我在Android上测试:图标还是出现了。但显然,在为Web编译时,它确实有所不同。因此,图标没有显示在那里。由于旧版本的flutter上的图标字体问题,我在这里完全走错了路:-)
7cwmlq897#
这就是我对这个问题的发现。我希望它能帮助到一些人。如果您将字体添加到web/assets/fontManifest.json文件中,然后运行flutter build web,新的清单将覆盖您刚刚编辑的清单(没有字体)。然后,当您部署时,您不会获得图标。运行flutter build web后,我复制了清单并将其添加到build/web/assets文件夹中。注意,这是我为Firebase托管构建和部署的地方。字体也应该在build/web/assets/fonts文件夹中。当你部署的时候,它应该都被上传了,你的字体就可以工作了。请注意,您需要在flutter build web命令之后手动交换清单,以便在每个部署中都能使用。
web/assets/fontManifest.json
flutter build web
build/web/assets
build/web/assets/fonts
7条答案
按热度按时间kmbjn2e31#
flutter_web repository:
MaterialIcons
的引用,因为相应的字体未包含在此源代码中。MaterialIcons-Extended.ttf
添加到此目录,则可以按如下方式更新FontManifest.json
:*解决方案
下载
MaterialIcons-Regular.ttf
here,将其放入assets
文件夹并相应地更新FontManifest.json
。lymnna712#
According to this您可以直接将材质图标添加到
FontManifest.json
,如下所示。yk9xbfzb3#
只要确保
以
pubspec.yaml
的形式与资产/图像并行存在irtuqstp4#
当您将文件上传到服务器时,请确保“assets”文件夹也已上传。因为文件是批量上传到服务器的,文件夹形式的文件不上传,所以应该单独上传。
2nbm6dog5#
这解决了我的问题:在生成web输出后,查看build/web/assets/fonts文件夹。如果有一个文件名为:MaterialIcons-Regular.otf然后将其添加到pubspec.yaml:
和FontManifest.json(在路径web/assets/FontManifest.json中):
}
注意字体文件的格式。它是otf不是ttf
zte4gxcn6#
在我的项目中,字体家族是在pubspec.yaml中定义的,没有大写字母,但我在代码中引用了它,以大写字母开头。
这是没有问题的,只要我在Android上测试:图标还是出现了。但显然,在为Web编译时,它确实有所不同。因此,图标没有显示在那里。
由于旧版本的flutter上的图标字体问题,我在这里完全走错了路:-)
7cwmlq897#
这就是我对这个问题的发现。我希望它能帮助到一些人。如果您将字体添加到
web/assets/fontManifest.json
文件中,然后运行flutter build web
,新的清单将覆盖您刚刚编辑的清单(没有字体)。然后,当您部署时,您不会获得图标。运行
flutter build web
后,我复制了清单并将其添加到build/web/assets
文件夹中。注意,这是我为Firebase托管构建和部署的地方。字体也应该在build/web/assets/fonts
文件夹中。当你部署的时候,它应该都被上传了,你的字体就可以工作了。请注意,您需要在
flutter build web
命令之后手动交换清单,以便在每个部署中都能使用。