英文:
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/fonts
towidgets/lib/fonts
-> necessary to the fonts be imported alongside the code source files - Updated
widgets/pubspec.yaml
to import the files fromlib/fonts
insteadassets/fonts
.
Now, when importing widgets/
in app/pubspec.yaml
the custom fonts are working as expected.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论