[Flutter] Card 위젯에 리플 효과 추가하기

시리즈의 전체목록을 보려면 링크를 눌러주세요

Card 위젯은 onTap 등의 제스처 이벤트를 가지고 있지 않기 때문에 Card 위젯을 탭 하는 등의 액션을 추가하려면 다른 위젯을 함께 사용하여야 합니다.

어떤 위젯에도 제스처 이벤트를 추가할 수 있는 GestureDetector 위젯이 있습니다. 그러나 이 위젯만 사용해 Material Design의 탭 등의 이벤트에 함께 따라오는 리플 효과를 보여주지는 않습니다.

이 이유때문에 InkWell 위젯을 사용합니다. 아래에 실제 작동하는 예제가 있습니다.

DartPad

Edit description

class InkWellCard extends StatelessWidget {
 final VoidCallback onTap;
 final Widget child;
 final BorderRadius _baseBorderRadius = BorderRadius.circular(8);InkWellCard({@required this.onTap, @required this.child});@override
 Widget build(BuildContext context) {
   return Card(
     elevation: 2,
     shape: RoundedRectangleBorder(borderRadius: _baseBorderRadius),
     child: InkWell(
       borderRadius: _baseBorderRadius,
       onTap: onTap,
       child: Container(
         decoration: BoxDecoration(
           borderRadius: _baseBorderRadius,
           color: Colors.transparent,
         ),
         child: child,
       ),
     ),
   );
 }
}

직접 작성한 InkWellCard 위젯은 Card의 자식 위젯으로 InkWell을 사용합니다. 그냥 추가만 하면 리플 효과가 Card를 벗어나버려 InkWell의 자식 위젯으로 Container를 추가해주어야합니다.

Card / InkWell 그리고 Container가 모두 같은 BorderRadius를 가지고 있어야 리플 효과가 Card 위젯 밖으로 흘러나가지 않습니다.