圆形容器内图标居中异常：图标轻微向右偏移

我用以下代码实现带点击效果的圆形容器图标时，发现图标存在轻微向右偏移（图标在圆形灰色容器内未居中，偏向右侧）：

ClipOval(child: Material(
      color: const Color(0xffF6F6F6),
          child: InkWell(splashColor: Colors.black, // Splash color
           onTap: () {},
           child: const SizedBox(
           width: 120, height: 120, child: Icon(Icons.person, size: 96, color: Color(0xFF828A9E)))))),

这种偏移大多是因为Icon组件自带细微内边距，或是SizedBox与Icon搭配时默认对齐方式导致的，以下是几种可行的解决方法：

• 用Center包裹Icon
  给Icon外层套一个Center组件，强制让图标在SizedBox范围内完全居中：

  ClipOval(child: Material(
    color: const Color(0xffF6F6F6),
    child: InkWell(
      splashColor: Colors.black,
      onTap: () {},
      child: const SizedBox(
        width: 120,
        height: 120,
        child: Center(
          child: Icon(Icons.person, size: 96, color: Color(0xFF828A9E)),
        ),
      ),
    ),
  ))
  

• 直接设置Icon的对齐属性
  无需额外嵌套组件，给Icon添加alignment: Alignment.center参数，指定其在父容器中居中：

  ClipOval(child: Material(
    color: const Color(0xffF6F6F6),
    child: InkWell(
      splashColor: Colors.black,
      onTap: () {},
      child: const SizedBox(
        width: 120,
        height: 120,
        child: Icon(
          Icons.person,
          size: 96,
          color: Color(0xFF828A9E),
          alignment: Alignment.center,
        ),
      ),
    ),
  ))
  

• 改用CircleAvatar组件
  Flutter自带的CircleAvatar专门用于实现圆形头像/图标，能避免手动组合组件带来的对齐问题，代码更简洁：

  InkWell(
    splashColor: Colors.black,
    onTap: () {},
    child: const CircleAvatar(
      backgroundColor: Color(0xffF6F6F6),
      radius: 60, // 半径对应原SizedBox的120直径
      child: Icon(Icons.person, size: 96, color: Color(0xFF828A9E)),
    ),
  )
  

内容的提问来源于stack exchange，提问作者Antonin GAVREL