[Flutter]IconButton의 패딩이 왜 들어가 있을까? 어떻게 없앨까?

아이콘 버튼을 사용할 때마다, 커스텀한 디자인에 맞춰 정확한 적용이 필요한 경우가 있다.
그러나 아이콘 버튼은 기본 패딩을 가지고 있어, 플러터를 막 시작한 나를 당황하게 한 적이 있었다.

Flutter에서 IconButton의 패딩을 EdgeInsets.zero로 설정하였음에도 불구하고 패딩이 완전히 사라지지 않는 이유는 IconButton의 구현 내부에 minSize 값이 기본적으로 설정되어 있기 때문이다.
IconButton은 기본적으로 최소 크기를 갖게 설정되어 있는데,
이는 버튼이 너무 작아져서 탭하기 어려워지는 것을 방지하기 위한 UI/UX 측면의 고려다.

기술적 배경

IconButton 위젯은 내부적으로 InkResponse 위젯을 사용하여 구현된다.
InkResponse는 머티리얼 디자인의 물결 효과를 제공하며,
이 위젯은 사용자가 버튼을 탭했을 때 눈에 보이는 피드백을 제공한다.
IconButton의 코드를 살펴보면, padding은 InkResponse 주위에 적용되는 공간을 조절하지만,
InkResponse의 크기 자체는 minSize에 의해 결정된다.

IconButton의 기본 minSize는 48x48 픽셀로 설정되어 있다.
이 값은 터치 대상이 최소한의 크기를 유지하도록 하여 터치 가능 영역을 적절하게 유지하기 위한 것이다.
따라서, padding을 EdgeInsets.zero로 설정하더라도 minSize로 인해 여전히 최소 크기가 유지되는 것이다.

해결 방법

이 문제를 해결하기 위해서는 IconButton의 constraints 속성을 사용하여 minWidth와 minHeight를 직접 조정해야 할 수도 있고, 그냥 constraints: const BoxConstraints()만 줄 수도 있다.
예를 들어, 다음과 같이 BoxConstraints를 설정하면 IconButton의 크기를 필요에 따라 줄일 수 있다:

IconButton(
  icon: Icon(Icons.add),
  onPressed: () {},
  padding: EdgeInsets.zero,
  constraints: BoxConstraints(
    minWidth: 24,
    minHeight: 24,
  ),
)

// 또는
IconButton(
  icon: Icon(Icons.add),
  onPressed: () {},
  padding: EdgeInsets.zero,
  constraints: BoxConstraints(),
)

이렇게 constraints를 설정함으로써, IconButton의 물리적 크기를 줄여
EdgeInsets.zero의 설정이 의도대로 동작하게 할 수 있다.
이는 minSize의 기본값을 무시하고, 실제로 UI 요소의 크기를 줄이는 효과를 갖는다.

이러한 방식을 통해 Flutter에서 IconButton의 패딩을 제어하고,
UI 디자인의 정밀한 조정이 가능하다.

참고 : https://stackoverflow.com/questions/50381157/how-do-i-remove-flutter-iconbutton-big-padding