如何在Ink包裹下正确缩小Flutter IconButton的尺寸？

IconButton本身带有默认内边距和最小尺寸约束，强行缩小外层Ink的宽高时，内部图标会因默认约束挤压偏移，导致无法居中。以下是两种可行的解决方式：

方案一：用InkWell自定义组件（完全控制布局） #

直接用InkWell替代IconButton，彻底摆脱默认约束，严格控制图标居中：

class SmallIconButton extends StatelessWidget {
  const SmallIconButton({super.key, required this.onPressed});

  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: Center(
        child: Ink(
          width: 24,
          height: 24,
          decoration: const ShapeDecoration(
            color: Colors.lightBlue,
            shape: CircleBorder(),
          ),
          child: InkWell(
            borderRadius: BorderRadius.circular(12),
            onTap: onPressed,
            child: const Center(
              child: Icon(
                Icons.add,
                color: Colors.white,
                size: 14,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

方案二：修改IconButton的默认约束 #

保留IconButton组件，通过调整参数消除默认干扰：

class SmallIconButton extends StatelessWidget {
  const SmallIconButton({super.key, required this.onPressed});

  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: Center(
        child: Ink(
          width: 24,
          height: 24,
          decoration: const ShapeDecoration(
            color: Colors.lightBlue,
            shape: CircleBorder(),
          ),
          child: IconButton(
            icon: const Icon(Icons.add, color: Colors.white, size: 14),
            onPressed: onPressed,
            padding: EdgeInsets.zero, // 移除默认内边距
            constraints: const BoxConstraints(minWidth: 24, minHeight: 24), // 强制最小尺寸匹配外层Ink
            splashRadius: 12, // 适配小尺寸调整水波纹范围
          ),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Miguel de Sousa