Question

我正在将材料设计图标用于浮动操作按钮。现在，我想使用自定义图标。从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);
}

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

提前感谢您的回答！

Answer 1

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

最后，我使用FontForge（开放源代码）打开了字体（.ttf），将图标居中，再次保存了字体，然后就可以使用了。

以下是步骤，它可以节省某人的时间：

在FontForge中打开字体
单击“查看-转到”并输入图标地址（在我的情况下为0xe800）
双击图标打开编辑器
指标-宽度居中
关闭编辑器
文件-生成字体
输入所需名称，然后选择TrueType作为字体格式
点击生成
将出现一些对话框，其中显示警告和修复某些问题的提议-只需单击“是”或一直进行查看即可。
如果弹出带有您图标名称的窗口，请双击该窗口并修复一些即将出现的弹出窗口的问题
完成-使用新字体之前不要忘记flutter clean

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

1 个答案: