387c2762298aae.md

title	emoji	type	topics	published	published_at
[Flutter] GestureDetectorでボタンじゃないWidgetにonTapを生やす	💻	tech	flutter	true	2020-08-08

:::message この記事は、2020-08-08に別のブログ媒体に投稿した記事のアーカイブです。 :::

小ネタです。

Flutterの FlatButton や RaisedButton のようなボタン系のWidgetには onPressed というコンストラクタ引数が用意されていますが、例えば何気ない画像とかに「タップしたら何かアクションをする」という実装を追加したいこともありますよね。

そういう場合は GestureDetector というWidgetでラップしてあげると、 onTap というコンストラクタ引数が生えてタップ可能になります👍

Before

Container(
  child: Image.network('https://via.placeholder.com/100'),
),

After

Container(
  child: GestureDetector(
    child: Container(
      child: Image.network('https://via.placeholder.com/100'),
    ),
    onTap: () {
      // do something
    },
  ),
),

こんな感じで画像がタップ可能になって、 onTap: () {} 内で任意の処理を実行できるようになります。

参考：[Flutter] 自前の画像をタップして処理を走らせる（GestureDetector、onTap） - Qiita