[Flutter] 탭바(TabBar) 클릭 시 번지는 효과(ripple) 없애기

✍ 탭바의 기본 클릭 ink 효과

탭바의 탭을 선택하면 기본으로 번지는 효과가 발생한다.

 

 

 

누르면 잉크처럼 번지는 효과(splash)와 관련된 TabBar 인자는 다음과 같다.

TabBar({  
  MaterialStateProperty ? overlayColor,
  InteractiveInkFeatureFactory? splashFactory, 
  BorderRadius? splashBorderRadius,
})

overlayColor 의 기능 중 일부는 splash 와 관련된 색상을 정의한다. splashFactory 는 어떤 splash 를 사용할지를 뜻하고 splashBorderRadius 는 번지는 영역의 가장자리를 둥글게 만들 수 있다.

 

 

 

예시) 

TabBar({  
  overlayColor: MaterialStateProperty.resolveWith((states) {
    if(states.contains(MaterialState.pressed)){
      return Colors.black.withOpacity(0.4);
    }
  }),
  indicator: BoxDecoration(
    color: Colors.cyan,
    borderRadius: BorderRadius.all(Radius.circular(30.0)),
  ),
  splashBorderRadius: BorderRadius.all(Radius.circular(30.0)),
  ...
});

overlayColor 로 눌렸을 때(pressed) 색상을 검은색으로 했고 인디케이터의 가장자리 둥근 정도(BoxDecoration.borderRadius) 와 splashBroderRadius 값을 동일하게 했다. 

 

 

 

😶 탭바의 번지는 효과 없애기

눌렀을 때 번지는 효과를 없애는 방법은 overlayColor 의 return 값을 투명한 색상으로 변경하고 splashFactory 를 NoSplash.splashFactory 로 설정하면 된다.

TabBar(
  overlayColor: MaterialStateProperty.resolveWith((states) {
    return Colors.transparent;
  }),
  splashFactory: NoSplash.splashFactory,
);