英文:
Use custom font in Flutter package
问题
I have a project that has the following folders structure:
app/
widgets/
Where app holds the main flutter application and widgets is a flutter package that contains reusable components used by app and any other project that may want.
I'm trying to use a custom font in one of the widgets placed in widgets/ folder, but when I run app and try to use this widget, the font is not recognized and the Widget title doesn't appear (probably because the font is being incorrectly imported).
I haven't imported the font in app/pubspec.yaml (not sure if I should)
I added the custom font to widgets/assets/fonts folder and imported it in widgets/pubspec.yaml like:
flutter:
fonts:
- family: <FONT_NAME>
fonts:
- asset: assets/fonts/<FILE>
weight: 400
And I'm using this font in widgets/<WIDGET> like this:
final style = TextStyle(fontFamily: <FONT_NAME>, fontWeight: FontWeight.w600, fontSize: 48, height: 48);
....
What am I missing in this setup?
OBS: app/ is a web project, not sure if it makes any difference.
英文:
I have a project that has the following folders structure:
app/
widgets/
Where app holds the main flutter application and widgets is a flutter package that contains reusable components used by app and any other project that may want.
I'm trying to use a custom font in one of the widgets placed in widgets/ folder, but when I run app and try to use this widget, the font is not recognized and the Widget title doesn't appear (probably because the font is being incorrectly imported).
I haven't imported the font in app/pubspec.yaml (not sure if I should)
I added the custom font to widgets/assets/fonts folder and imported in widgets/pubspec.yaml like:
flutter:
fonts:
- family: <FONT_NAME>
fonts:
- asset: assets/fonts/<FILE>
weight: 400
And I'm using this font in widgets/<WIDGET> like this:
final style = TextStyle(fontFamily: <FONT_NAME>, fontWeight: FontWeight.w600, ontSize: 48, height: 48);
....
What am I missing in this setup?
OBS: app/ is an web project, not sure if it makes any difference.
答案1
得分: 0
以下是已翻译的部分:
在我的情况下,这实际上与字体导入无关的问题……
我在widgets/<WIDGET>中使用FontStyle的height属性,而不是绝对值,而是乘数。例如:使用
TextStyle(fontFamily: '<FAMILY>', fontWeight: FontWeight.w700, fontSize: 48, height: 48)
而不是
TextStyle(fontFamily: '<FAMILY>', fontWeight: FontWeight.w700, fontSize: 48, height: 1)
因此,字体被正确导入,但由于字体的实际高度为48 * 48 = 2304,所以未被呈现。
在app/中使用widgets/字体的最终设置如下:
- 从
app/pubspec.yaml中删除字体导入 - 将字体从
widgets/assets/fonts移动到widgets/lib/fonts-> 必须与代码源文件一起导入字体 - 更新
widgets/pubspec.yaml以从lib/fonts而不是assets/fonts导入文件。
现在,在app/pubspec.yaml中导入widgets/时,自定义字体按预期工作。
英文:
In my case, it ended up being a problem not related with the font importing...
I was using height property from FontStyle in widgets/<WIDGET> as an absolute value instead a multiplier. E.g: using
TextStyle(fontFamily: '<FAMILY>', fontWeight: FontWeight.w700, fontSize: 48, height: 48)
instead of
TextStyle(fontFamily: '<FAMILY>', fontWeight: FontWeight.w700, fontSize: 48, height: 1)
So the font was being correctly imported, but it wasn't being rendered because the actual height of the font was 48 * 48 = 2304.
The final setup to use widgets/ fonts in app/ was:
- Removed the font import from
app/pubspec.yaml - Moved the fonts from
widgets/assets/fontstowidgets/lib/fonts-> necessary to the fonts be imported alongside the code source files - Updated
widgets/pubspec.yamlto import the files fromlib/fontsinsteadassets/fonts.
Now, when importing widgets/ in app/pubspec.yaml the custom fonts are working as expected.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论