[Flutter] IconButton 간격 줄이기 feat.패딩,마진제거

 

 

 

 

해당 IconButton들의 간격을 줄여야 하는 일이 발생했다. 간격을 줄이기 위해서 해당 아이콘들의 패딩과 마진값을 보기로 하자.

 

 

 

Inspector로 확인한 결과 IconButton이 기본적으로 가지고 있는 패딩/마진 값이 있다는 걸 확인하였다. 대부분의 해결방안으로 아래와 같은 코드를 알려주었다.

 

    return IconButton(
      ...
      padding: EdgeInsets.zero,
      constraints: BoxConstraints(),
    );

 

padding에 EdgeInsets.zero를 넣고 constraints에 BoxConstraints()를 넣고 확인해 보자.

 

 

 

확인한 결과 패딩값은 사라진 거 같으나 결론적으로 간격이 줄어들지 않았다. 해결책을 찾던 중에 아래와 같은 방법으로 해결할 수 있었다.

 

    return IconButton(
	  ...
      visualDensity: VisualDensity.compact,
    );

또는 

    return IconButton(
      ...
      visualDensity: const VisualDensity(horizontal: -4),
    );