[Flutter] InkWell, Button의 물결 효과 없애기

이럴 때 사용해요!

위의 사진과 같이 Button이나 InkWell을 사용한 위젯을 탭 했을 시, 물결 효과가 발생한다.

굳이 제거를 해야 할 필요는 없겠지만 위의 사진처럼 위젯에 Padding이나 Margin을 적용 했을 시, 그 간격과 같이 물결 효과가 발생하여 깔끔한 디자인을 위해 제거를 하는 것도 좋다.

사용 방법

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

splashColor : 터치가 발생한 곳에서 시작하여 원으로 퍼지는 효과입니다.
highlightColor : 위젯 전체로부터 물결 효과를 나타냅니다.

이 두 개를 Colors.transparent로 설정하여 투명하게 만들어 해당 효과가 안 보이도록 합니다.

1. 앱 전체에 물결 효과를 없애고 싶은 경우

MaterialApp(
  title: 'MyApp
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    primarySwatch: Colors.blue,
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
  ),
  home: MainPage(),
),

main.dart 페이지에 위 코드처럼 추가한다.

2. 부분 페이지에 물결 효과를 없애고 싶은 경우

Theme(
  data: ThemeData(
    primarySwatch: Colors.blue,
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
  ),
  child: MainPage(),
),

효과를 없애고 싶은 페이지에 Theme 위젯을 감싸 위 코드처럼 추가한다.