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

Question

我正在使用 Material 设计图标作为 float 操作按钮。现在我想使用自定义图标。我使用 Flutter-Icon-Generator ( http://fluttericon.com/ ) 从 SVG 文件生成了一种字体。一切都很顺利，但图标未居中。

这里是最小化的屏幕截图，欧元图标居中，另一个(自定义图标)不是居中:

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);
}

pubspec.yaml 在这里并不有趣，因为我在那里得到了正确的图标。

预先感谢您的回答!

Answer 1

我已经找到了这个问题的答案。问题是 svg-path 的高度大于宽度。我尝试使用 inkscape 进行一些“黑客”操作，以向 svg 添加另一个宽度等于高度的不可见路径，但没有成功。

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

以下是步骤，它可能会节省某人的时间:

1. 在 FontForge 中打开字体
2. 点击“查看 - 转到”并输入图标地址(在我的例子中是 0xe800)
3. 双击图标打开编辑器
4. 指标 - 宽度居中
5. 关闭编辑器
6. 文件 - 生成字体
7. 输入您想要的名称并选择 TrueType 作为字体格式
8. 点击“生成”
9. 会出现一些对话框，其中包含警告和修复某些问题的建议 - 只需点击"is"或一直查看即可
10. 如果弹出一个带有您的图标名称的窗口 - 双击它并修复即将出现的弹出窗口的问题
11. 完成 - 在使用新字体之前不要忘记flutter clean