[Flutter]ListView.builderの要素にタップ処理(onTap)を追加するには？

[Flutter]ListView.builderの要素にタップ処理を追加するには？

Flutter

2021.10.28

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

ListView.builderの要素にタップ処理を追加する方法を紹介します。

方法
まとめ

方法

ListView.builderの要素にタップ処理を追加するには、GestureDetectorを使います。

まず、リストの要素となるウェジェットを「GestureDetector」の「child」にします。

そして、GestureDetectorの引数「onTap」にタップした時の処理を指定します。

itemBuilder: (context, index) {
  return GestureDetector(
    onTap: (){/*タップ処理*/},
    child: ListTile(
      title: Text('$index'),
    ),
  );
}

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return GestureDetector(
              onTap: () {
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    content: Text('Tap $index'),
                  ),
                );
              },
              child: ListTile(
                title: Text('$index'),
              ),
            );
          },
        ),
      ),
    );
  }