Double-Tap on Image Example in Flutter

In this tutorial, you will learn how to handle double-tap events on images in Flutter. You not only want to display information to users, but you also want users to interact with your app.  To handle the double-tap event we will use the GestureDetector widget to respond to fundamental actions.

To start off we will need to create a new Flutter project in Android Studio(or any IDE that you might be using), if you don’t know how to create a project you can refer to the “Hello World App in Flutter” tutorial.

Once you have that done delete all the initial code except the following:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyNavigationBar(),
    );
  }
}

class MyNavigationBar extends StatefulWidget {
  MyNavigationBar({Key key}) : super(key: key);

  @override
  _MyNavigationBarState createState() => _MyNavigationBarState();
}

class _MyNavigationBarState extends State<MyNavigationBar> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

    );
  }
}

Add GestureDetector to an Image

As we mentioned at the beginning we will use a GestureDetetctor Widget to wrap the image. So go ahead and add a Center widget that has a child Image which is wrapped with GestureDetector Widget like in the code below:

Center(
        child: GestureDetector(
              child: Image.asset('assets/Peaches.png'),// this is any image you would like to use from your assets folder
        ),
      ),

GestureDetector widget has a built-in property onDoubleTap which is listening for a double-tap in the area of the widget and has a void function waiting to execute upon getting the double-tap. In our tutorial we will have it do a simple print function in the console that will say ‘Hello World” every time the user double taps on the image. Below is the complete code for this tutorial including the “onDoubleTap” event handler:

Handle Double-Tap. Complete Code Example.

The below code example is a very simple Flutter application that will display an image. You should be able to run this code example in your development environment that supports Flutter. When you double-tap on the image displayed, there should be a “Hello World!” message printed in the console of your IDE.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyNavigationBar(),
    );
  }
}

class MyNavigationBar extends StatefulWidget {
  MyNavigationBar({Key key}) : super(key: key);

  @override
  _MyNavigationBarState createState() => _MyNavigationBarState();
}

class _MyNavigationBarState extends State<MyNavigationBar> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text('Double-Tap on Image Example in Flutter'),
          backgroundColor: Colors.teal),
      body: Center(
        child: GestureDetector(
          onDoubleTap: (){
            print('Hello World!');
          },
          child: Image.asset('assets/Peaches.png'),
        ),
      ),
    );
  }
}

I hope this Flutter tutorial was helpful for you. If you are interested in learning Flutter, please check other Flutter tutorials on this site. Some of them have video tutorials included.