[Flutter]リストビュー(ListView)の要素にタップ処理を追加するには？

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

リストビューの要素にタップ処理を追加する方法を紹介します。

方法

リストビューの要素にタップ処理を追加する方法は、３つあります。

GestureDetector

１つ目は、GestureDetectorを使う方法です。

リストビューの要素全てをGestureDetectorでラップし、引数「onTap」にタップした時の処理を指定します。

ListView(
  children: [
    GestureDetector(
      onTap: () {/*タップ処理*/},
      child: /*item*/,
    ),
    GestureDetector(
      onTap: () {/*タップ処理*/},
      child: /*item*/,
    ),
    GestureDetector(
      onTap: () {/*タップ処理*/},
      child: /*item*/,
    ),
  ],
),

InkWell

２つ目は、InkWellを使う方法です。

リストビューの要素全てをInkWellでラップし、引数「onTap」にタップした時の処理を指定します。

ListView(
  children: [
    InkWell(
      onTap: () {/*タップ処理*/},
      child: /*item*/,
    ),
    InkWell(
      onTap: () {/*タップ処理*/},
      child: /*item*/,
    ),
    InkWell(
      onTap: () {/*タップ処理*/},
      child: /*item*/,
    ),
  ],
),

ListTile

３つ目は、ListTileを使う方法です。

ListTileウェジェットは、引数「onTap」でタップ処理を指定することが出来ます。

ListView(
  children: [
    ListTile(
      onTap: () {/*タップ処理*/},
    ),
    ListTile(
      onTap: () {/*タップ処理*/},
    ),
    ListTile(
      onTap: () {/*タップ処理*/},
    ),
  ],
),

まとめ

リストビューの要素にタップ処理を追加する方法は、次の３つです。

• GestureDetectorのchildに指定
• InkWellのchildに指定
• ListTileの引数「onTap」で指定