确保Flutter中的自定义图标字体具有一致的间距

Question

我正在尝试在我的Flutter应用中使用this自定义天气字体，但是间距有些麻烦。

似乎图标在其容器外部渲染，这会导致一些布局问题。

此代码创建以下内容

Container(
  color: Colors.amber,
  child: Icon(
    IconData(0xf05c),
    size: 100,
  ),
);

如您所见，图标不在其边界框中居中。

这是另一个图标的示例：

什么是最好的方法，以便所有图标占据相同的空间并位于其框的中央？

Answer 1

我使用常规的内置图标运行上述代码，容器自动将图标居中

Container(
  color: Colors.amber,
  child: Icon(
      Icons.access_alarm,
      size: 100,
  ),
),

您从哪里获得了这2张图片？我想知道这2个自定义图像是否可能弄乱了该Container父级的对齐方式。这2张图片可能在图片本身中内置了多余的填充，可能会将其丢弃吗？

Answer 2

Container的父容器的对齐有时会影响Container的内部对齐，这可以通过向Container添加对齐属性来确保。

Container(
  alignment:Alignment.center
  color: Colors.amber,
  child: Icon(
    IconData(0xf05c),
    size: 100,
  ),
);