[Flutter]ListView.builderで要素(item)にリップルエフェクト(ripple effect)を追加するには？

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

ListView.builderで要素にリップルエフェクトを追加する方法を紹介します。

方法

ListView.builderで要素にリップルエフェクトを追加するには、InkWellを使います。

まず、引数「itemBuilder」で表示するウェジェットをInkWellの「child」にします。

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

ListView.builder(
  itemCount: /*count*/,
  itemBuilder: (context, index) {
    return InkWell(
      onTap: () {},
      child: /*Item*/,
    );
  },
),

これでListView.builderで要素にリップルエフェクトを追加することが出来ます。

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListView.builder(
            itemCount: 10,
            itemBuilder: (context, index) {
              return InkWell(
                onTap: () {},
                splashColor: Colors.pink,
                child: Text('$index'),
              );
            },
            itemExtent: 50,
          ),
        ),
      ),
    );
  }