[Flutter]Card(カード)でInkWellのリップルエフェクト(リップルエフェクト)を表示(show)するには？

どうも、ちょげ(@chogetarou)です。

CardでInkWellのリップルエフェクトを表示する方法を紹介します。

方法

CardでInkWellのリップルエフェクトを表示するには、CardではなくCard内のウェジェットをInkWellでラップします。

Card(
  child: InkWell(
    onTap: () {},
    child: ListTile(
      title: Text('Flutter'),
    ),
    splashColor: Colors.pink,
  ),
),

InkWellのchildにCardを指定してもタップの処理は行われます。

ただ、Cardの後ろでリップルエフェクトが起こることにより、リップルエフェクトが表示されなくなるのです。