在Flutter包中使用自定义字体。

huangapple go评论73阅读模式
英文:

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: &lt;FONT_NAME&gt;
      fonts:
        - asset: assets/fonts/&lt;FILE&gt;
          weight: 400

And I'm using this font in widgets/&lt;WIDGET&gt; like this:

final style = TextStyle(fontFamily: &lt;FONT_NAME&gt;, 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>中使用FontStyleheight属性,而不是绝对值,而是乘数。例如:使用

TextStyle(fontFamily: '&lt;FAMILY&gt;', fontWeight: FontWeight.w700, fontSize: 48, height: 48)

而不是

TextStyle(fontFamily: '&lt;FAMILY&gt;', 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/&lt;WIDGET&gt; as an absolute value instead a multiplier. E.g: using

TextStyle(fontFamily: &#39;&lt;FAMILY&gt;&#39;, fontWeight: FontWeight.w700, fontSize: 48, height: 48)

instead of

TextStyle(fontFamily: &#39;&lt;FAMILY&gt;&#39;, 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 to widgets/lib/fonts -> necessary to the fonts be imported alongside the code source files
  • Updated widgets/pubspec.yaml to import the files from lib/fonts instead assets/fonts.

Now, when importing widgets/ in app/pubspec.yaml the custom fonts are working as expected.

huangapple
  • 本文由 发表于 2023年5月11日 04:25:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76222309.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定