FlutterのCard内でInkWellを使用した際にタップエフェクトをカード範囲内にのみ適用させる

はじめに

Flutterを使って個人開発をしている際、Cardをタップできるようにしたい場面があった。

タップエフェクトを与えたかったのでInkWellを利用したところ、タップエフェクトがCardからはみ出て四角く表示されてしまった。

これをエフェクトをカード範囲内のみに適用させる方法をメモとして残しておく。

対応方法

CardのclipBehaviorプロパティにClip.hardEdgeを適用させることでタップエフェクトをカード範囲内のみに適用させることができる。

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

注意点

今回のような要素がはみ出す場面にはClipは有効な手段だが、要素をクリップする際にはパフォーマンスコストがかかるとのこと。

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

クリップする要素数が多かったり、パフォーマンスが求められる際は気をつけるようにしたい。