我正在使用材质设计图标作为浮动操作按钮。现在我想使用一个自定义图标。从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在这里不感兴趣,因为我在那里得到了正确的图标。
提前感谢您的回答!
2条答案
按热度按时间ttisahbt1#
我找到了一个答案。问题是svg-path的高度大于宽度。我尝试了一些“黑客”与inkscape添加另一个不可见的路径到svg与宽度等于高度,但它没有工作。
最后我用FontForge(开源)打开字体(.ttf),将图标居中,再次保存字体,它工作了。
以下是步骤,它可能会节省一些人的时间:
1.在FontForge中打开字体
1.点击“查看-后藤”并输入图标地址(在我的情况下是0xe 800)
1.双击您的图标打开编辑器
1.度量-宽度居中
1.关闭编辑器
1.文件-生成字体
1.输入所需的名称并选择TrueType作为字体格式
1.单击生成
1.一些对话框将出现警告和提供修复一些东西-只需点击是或审查所有的时间
1.如果一个窗口弹出与您的图标名称-双击它和一些修复的问题与即将到来的弹出窗口
1.完成-在使用新字体之前不要忘记
flutter clean
nom7f22z2#
我建议使用fontify。它可以解决很多问题,包括居中图标。
还有一个视频,我做了关于如何修复坏/损坏的SVG在我们的自定义字体图标.这里是链接https://www.youtube.com/watch?v=JZouY0sWiBA