flutter 네비게이션바와 버튼의 물결효과 없애기 (feat. inkwell widget)

 
플러터에는 사용자 터치이벤트 처리를 위한 위젯으로 Inkwell 위젯과 GestureDetector 위젯이 있다.
 
Inkwell 위젯

출처: Material Web 공식문서

1. Inkwell 위젯은 Material 위젯안에서 사용되기 때문에 Material 디자인 시스템이 적용되어 사용자 이벤트를 처리한다.
2. 따라서 사용자가 탭할시 Material 디자인 테마 효과인 Ripple Effect가 기본으로 구현된다.

 
GestureDetector 위젯

1.  GestureDetector 위젯도 inkwell 위젯처럼 사용자 터치이벤트를 처리해준다.
2. 차이점으로는 GestureDetector는 Matrial 하위위젯이 아니다! 따라서 Material 디자인 시스템이 적용되지 않고 위와같은 리플 이펙트도 적용되지않는다.
3. 또한 inkwell보다 좀더 다양한 터치제스쳐 처리가 가능하다. inkwell에서는 onTap, onDoubleTap 과 같은 단순한 터치제스처를 처리하지만 GestureDetector에서는 사용자의 드래그 이벤트 처리등 훨씬 세부적으로 처리해줄 수 있다.

 

---

 
문제는 플러터 프로젝트는 보통 Material App 을 빌드하고, Material App 위젯 안에 구현된 버튼들은 Material 디자인 시스템이 적용되어 inkwell 위젯이 기본으로 구현되고 탭할시 ripple effect가 디폴트로 구현된다.
 

 
각종 버튼들을 연습용으로 구현해보았다. 작은 버튼에서 생기는 ripple effect는 그나마 괜찮지만 네비게이션 바에서 생기는 효과는 너무 보기가 안좋다. 이렇게 Material app widget 에서 기본구현된 ripple effect를 없애주는 방법은 리플 효과의 색을 투명하게 만들어 사용자에게 안보이도록 하는 것이다.
 

splashColor: Colors.transparent,
highlightColor: Colors.transparent,

 
두줄의 코드를 리플효과를 없애주고 싶은 위젯에서 사용해주면 된다. 이때 각 위젯마다 코드가 들어가면 리플효과를 없앨때마다 매번 중복코드가 작성되기 때문에 최대한 효과를 없애주고 싶은 위젯트리 최상단에서 없애주는 것이 좋다.
 

 
특히 위 두줄 코드를 작성했음에도 ripple effect가 안사라지는 경우를 종종 볼 수 있는데 이는 BottomNavigationBar와 TabBar는 내부적으로 InkWell을 사용하여 물결 효과를 제공하기 때문이다. 단순히 하위속성에서 InkWell을 감싸는 것으로는 내부의 물결 효과를 제거할 수 없다.
 

 
따라서 내부적으로 inkwell 효과가 적용된 위젯들의 물결효과를 없애주고 싶다면 한단계 상위 위젯에서 ThemeData를 이용해 리플이펙트 색상을 투명하게 만들어 하위 위젯에게 전달하는 것이 바람직하다. 위 코드와 같이 설정하면 최상단 Material APP 하위 위젯에서는 ripple effect가 사라지게 된다.