Flutter：如何让20x20尺寸FloatingActionButton的图标居中？

问题根源是FloatingActionButton默认带有16px的内边距，当按钮尺寸仅为20x20时，内边距会压缩图标空间导致偏移，以下是几种可行的解决方式：

方法1：移除FloatingActionButton默认内边距 #

通过设置padding: EdgeInsets.zero消除默认内边距，同时可适当缩小图标尺寸适配按钮：

SizedBox(
  width: 20,
  height: 20,
  child: FloatingActionButton(
    onPressed: null,
    padding: EdgeInsets.zero, // 关键：移除默认内边距
    child: Icon(Icons.add, size: 16), // 缩小图标匹配按钮尺寸
  ),
),

方法2：使用RawMaterialButton实现自定义圆形按钮 #

RawMaterialButton没有FloatingActionButton的默认内边距限制，布局更灵活，同时可以保持圆形样式：

SizedBox(
  width: 20,
  height: 20,
  child: RawMaterialButton(
    onPressed: null,
    shape: const CircleBorder(), // 保持圆形外观
    fillColor: Theme.of(context).colorScheme.primary, // 匹配主题主色
    child: const Icon(Icons.add, size: 16, color: Colors.white),
  ),
),

方法3：微调图标位置（临时方案） #

如果仅需小幅度修正偏移，可使用Transform.translate调整图标位置：

SizedBox(
  width: 20,
  height: 20,
  child: FloatingActionButton(
    onPressed: null,
    child: Transform.translate(
      offset: const Offset(-1, -1), // 根据实际偏移调整数值
      child: const Icon(Icons.add),
    ),
  ),
),

内容的提问来源于stack exchange，提问作者John Han