[Flutter]InkWellのリップルエフェクト(ripple effect)を画像(on image)につけるには？

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

InkWellのリップルエフェクトを画像の上に表示する方法を紹介します。

方法
使用例

方法

InkWellのリップルエフェクトを画像につけるには、Ink.imageを使います。

まず、InkWellをInk.imageでラップします。

そして、Ink.imageの引数「image」に画像を指定します。

Ink.image(
  image: AssetImage('Asset Path'), //NetworkImageでも可
  child: InkWell(
    onTap: () {},
  ),
),

Ink.imageを使えば、InkWellのリップルエフェクトを画像につけることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Ink.image(
          height: 200,
          image: NetworkImage(
              'https://cdn.pixabay.com/photo/2016/07/21/14/18/dog-1532627__340.png'),
          fit: BoxFit.cover,
          child: InkWell(
            onTap: () {},
            splashColor: Colors.pink,
          ),
        ),
      ),
    );
  }