[Flutter]リストビュー(ListView)の要素(item)にリップルエフェクト(ripple effect)をつけるには？

[Flutter]リストビュー(ListView)の要素にリップルエフェクトをつけるには？

Flutter

2021.10.31

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

リストビューの要素にリップルエフェクトをつける方法を紹介します。

方法

リストビューの要素にリップルエフェクトをつけるには、InkWellを使います。

具体的には、要素を１つ１つをInkWellの「child」に指定します。

そして、InkWellの引数「onTap」に関数を指定します。

ListView(
  children: [
      InkWell(
        onTap: () {/*Tap*/},
        child: /*Item*/,
      ),
      InkWell(
        onTap: () {/*Tap*/},
        child: /*Item2*/,
      ),
      InkWell(
        onTap: () {/*Tap*/},
        child: /*Item3*/,
      ),
  ],
),

これでリストビューの要素にリップルエフェクトがつきます。

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListView(
            children: [
              for (var i = 0; i < 20; i++)
                InkWell(
                  onTap: () {},
                  splashColor: Colors.pink,
                  child: ListTile(
                    title: Text('$i'),
                  ),
                )
            ],
          ),
        ),
      ),
    );
  }