flutter 自定义SVG字体图标在图标小部件中不居中

h5qlskok  于 2023-04-07  发布在  Flutter
关注(0)|答案(2)|浏览(187)

我正在使用材质设计图标作为浮动操作按钮。现在我想使用一个自定义图标。从SVG文件中,我使用Flutter-Icon-Generator(http://fluttericon.com/)生成了一个字体。一切都很好,但图标没有居中。
这里是最小化的屏幕截图,€-图标居中,另一个(自定义一个)不是:

FloatingActionButton的对应代码为:

Widget money() {
    return Container(
      child: FloatingActionButton(
        backgroundColor: widget.openColor,
        elevation: 0,
        heroTag: "btn_money",
        onPressed: () {
          widget.onPressed(DashboardFabAction.AddMoney);
          animate();
        },
        tooltip: 'Money',
        child: Icon(Icons.euro_symbol, color: widget.iconColorOpen,),
      ),
    );
  }

  Widget eggs() {
    return Container(
      child: FloatingActionButton(
        backgroundColor: widget.openColor,
        elevation: 0,
        heroTag: "btn_eggs",
        onPressed: () {
          widget.onPressed(DashboardFabAction.AddEggs);
          animate();
        },
        tooltip: 'Eggs',
        child: Icon(CustomIcons.egg, color: widget.iconColorOpen,),
      ),
    );
  }

CustomIcons的代码为:

import 'package:flutter/widgets.dart';

class CustomIcons {
  CustomIcons._();

  static const _kFontFam = 'CustomIcons';

  static const IconData egg = const IconData(0xe800, fontFamily: _kFontFam);
}

yaml在这里不感兴趣,因为我在那里得到了正确的图标。
提前感谢您的回答!

ttisahbt

ttisahbt1#

我找到了一个答案。问题是svg-path的高度大于宽度。我尝试了一些“黑客”与inkscape添加另一个不可见的路径到svg与宽度等于高度,但它没有工作。

最后我用FontForge(开源)打开字体(.ttf),将图标居中,再次保存字体,它工作了。

以下是步骤,它可能会节省一些人的时间:
1.在FontForge中打开字体
1.点击“查看-后藤”并输入图标地址(在我的情况下是0xe 800)
1.双击您的图标打开编辑器
1.度量-宽度居中
1.关闭编辑器
1.文件-生成字体
1.输入所需的名称并选择TrueType作为字体格式
1.单击生成
1.一些对话框将出现警告和提供修复一些东西-只需点击是或审查所有的时间
1.如果一个窗口弹出与您的图标名称-双击它和一些修复的问题与即将到来的弹出窗口
1.完成-在使用新字体之前不要忘记flutter clean

nom7f22z

nom7f22z2#

我建议使用fontify。它可以解决很多问题,包括居中图标。
还有一个视频,我做了关于如何修复坏/损坏的SVG在我们的自定义字体图标.这里是链接https://www.youtube.com/watch?v=JZouY0sWiBA

相关问题