Applying Tap Effect Within the Flutter Card's Boundary Using InkWell

Introduction

While developing personally using Flutter, there was a situation where I wanted to make the Card tappable.

I wanted to give it a tap effect, so I used InkWell. However, the tap effect protruded out of the Card and was displayed squarely.

I’ll leave a note on how to apply the effect only within the range of the card.

Solution

By applying Clip.hardEdge to the clipBehavior property of the Card, you can apply the tap effect only within the range of the card.

Card(
  clipBehavior: Clip.hardEdge,
  child: InkWell(
    onTap: () {},
    child: SomeWidget(),
  ),
),

Points to Note

While Clip is an effective means in situations where elements protrude, like in this case, it’s said that there’s a performance cost when clipping elements.

Clip enum - dart:ui library - Dart API

API docs for the Clip enum from the dart:ui library, for the Dart programming language.

api.flutter.dev

If there are many elements to clip, or when performance is required, care should be taken.