[TroubleShooting] Flutter InkWell Ripple invisible



Android에 Ripple 효과가 있듯이, Flutter 에서 Ripple 효과를 주는 방법이 있습니다.

이는 단순하게 위젯을 InkWell로 감싸주면 되는데요

 

감싼 위젯(ex Container)에 color 속성을 주었을 경우에 InkWell 영역이 보여지지 않는 이슈가 발생할 수 있습니다.

이는 자칫 답답할 수도 있으나, InkWell 공식 문서에서 설명해 주고 있습니다.

 

 

해결법은

InkWell ( child : Container ( )) 대신

InkWell ( child : Ink()) 로 변경해주면 됩니다.

Ink 위젯은 Image, Container, DecoratedBox를 대체할 수 있습니다.

 

그리고 만약 Container에 radius 같은 효과를 주었다면, InkWell에도 raduis 효과를 주어야 클릭 영역과 컨테이너 영역이 깔끔하게 맞춰질 수 있습니다.

 

제 코드는 다음과 같습니다

InkWell(
  onTap: e['function'],
  borderRadius: const BorderRadius.all(
    Radius.circular(20.0),
  ),
  child: Ink(
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: const BorderRadius.all(Radius.circular(20)),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(0.025),
          spreadRadius: 5,
          blurRadius: 8,
        ),
      ],
      border: Border.all(
        color: Colors.black.withOpacity(1),
        width: 1,
      ),
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 5),
          width: 30,
          height: 30,
          child: Image.asset(e['image']),
        ),
        Text(
          e['title'] as String,
          style: const TextStyle(
            fontFamily: 'NotoSansKR',
            fontWeight: FontWeight.w500,
            fontSize: 13,
          ),
        ),
      ],
    ),
  ),
)