LoginSignup
1

More than 3 years have passed since last update.

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

Posted at

はじめに

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

完成図

ピーターパン症候群のおじさんをタップするたびにカウンターが上がっていきます
画面収録 2020-05-16 19.00.34.mov.gif

実装

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1