[Flutter] InkWell 물결효과가 동작하지 않는 문제해결법(InkWell not showing ripple effect)

문제 발생

아래와 같이 Container에 InkWell을 붙였는데 InkWell의 물결 효과가 나타나지 않았습니다.

 

찾아보니 해당 이슈는 플러터의 bug report에 등록되어 있었고 Container의 컬러가 InkWell의 ripple effect를 덮어버리기 때문에 이러한 현상이 일어난다고 합니다.

 

Ripple효과를 가진 Container를 만들때마다 이런 버그가 있는지 깜빡하고 맨날 해결법 검색을 해서 해결책을 적어두고 보려고 합니다.

 

https://github.com/flutter/flutter/issues/3782

InkWell and FlatButton do not ripple when inside a container with opaque background · Issue #3782 · flutter/flutter

 

 

Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(24.0),
  ),
  child: InkWell(
    onTap: () {
      print("onTap");
    },
    borderRadius: BorderRadius.circular(24.0),
    child: Container(
      width: 200.0,
      height: 100.0,
    ),
  ),
)

문제 해결

Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(24.0),
  ),
  child: Material( // 추가
    child: InkWell(
      borderRadius: BorderRadius.circular(24.0),
      onTap: () {
        print("onTap");
      },
      child: Container(
        width: 200.0,
        height: 100.0,
      ),
    ),
    color: Colors.transparent, // 추가
  ),
)

위와 같이 InkWell 상위 위젯으로 Material을 추가하고 color를 transparent로 만들어주면 ripple 효과가 정상적으로 작동하였습니다.

 

 

References

https://api.flutter.dev/flutter/material/InkWell-class.html

InkWell class - material library - Dart API