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

はじめに

画像をタップして処理を走らせるためには、GestureDetectorとonTapを用います。
今回はAndroidStudioでプロジェクト作成時に作られるカウンターアプリを改変してみます。

完成図

ピーターパン症候群のおじさんをタップするたびにカウンターが上がっていきます

実装

GestureDetectorでラップし、タップしたときに走らせる処理と、対象の画像を記述するだけです。

GestureDetector(
  onTap: () {
    // タップしたときの処理を記述（ここではカウンターを+1）
    setState(() {
      _counter++;
    });
  },
  // 対象の画像を記述 
  child: Image.network(
      'https://3.bp.blogspot.com/-QxAapI2H1Pk/VhSAsJpLPhI/AAAAAAAAzG0/80qjXfZlomk/s800/peterpan_syndrome.png'),
),

参考

■公式ドキュメント

https://flutter.dev/docs/cookbook/gestures/handling-taps
https://flutter.dev/docs/cookbook/images/network-image