Flutter의 IconButton 완전 정복하기

IconButton의 기본적인 기능은 생략하고 내가 기억해야할 것들을 기록한다.

주기적으로 추가될 수 있음!

---

1️⃣ IconButton default padding 없애기

@override
Widget build(BuildContext context){
	return IconButton(
		onPressed: (){},
    padding: EdgeInsets.zero,
    constraints: const BoxConstraints(),
    icon: const Icon(Icons.close)
	);
}

padding을 zero로 모두 초기화하고, BoxConstraints를 통해 아이콘 크기에 맞추어 준다.

 

2️⃣ IconButton ripple effect

 IconButton을 눌렀을 때 물방울이 퍼지는 듯한 효과가 생기는데, 이것을 Ripple effect라고 한다. 그러나 스타일을 주기 위해 Container로 감싸니 z-index가 뒤로 밀린 것처럼 Ripple effect가 박스 뒤에서 보여지는 현상이 발생했다.

@override
Widget build(BuildContext context){
	return Material(
		child: IconButton(
			onPressed: (){},
	    padding: EdgeInsets.zero,
	    constraints: const BoxConstraints(),
	    icon: const Icon(Icons.close)
		);
	),
}

이 때, Ripple effect는 Material의 일종으로 Material 위젯으로 감싸주어야 IconButton 크기 만큼의 효과가 보인다.