Flutter Gestures

Learn to handle Flutter gestures like tap, press, long press, drags, etc. It is very important to know the actions of user.
Gestures are physical action and movement on the app screen with the purpose to give command or control the app. It is very important feature to interact with users. Some of the examples of gestures are:

sliding the lock screen.
Tap on mobile screen
Holding touch on the button.

Different types of Gestures:
Tap: It is a touching screen with a fingertip for very short time and releasing it instantly. This gesture contains the following events:

onTapDown
onTapUp
onTap
onTapCancel

Double Tap: It is touching screen and releasing it instantly two times with a fingertip. This gesture contains the following events:

onDoubleTap
Press: It is pressing screen with a fingertip for short time. This gesture contains the following events:

onPressed
Long Press: It is touching the screen with a fingertip for a long time. This gesture contains the following events:

onLongPress

Drag: It is pressing on any component on app screen and move it from one location to another location. This gesture contains the following events:

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd
onVerticalDragStart
onVerticalDragStart
onVerticalDragStart

How to detect Gestures:
On app, you may need to respond to users according to their actions. For example, we need to execute some blocks of code on button press and give output to the user. In Flutter, some widgets have default gesture responder parameters on which we need to pass the sets of code-block. For example, FlatButton widgets has onLongPress and onPressed parameters on which we can assign code block or any method to execute.

FlatButton(
  onLongPress: (){
   //sets of code to execture after button long press
    print("Button is long pressed.");
  },
  onPressed: (){
    //sets of code to execute after button press
     print("Button is pressed");
  }, 
  child: Text("Press Button"),
)

This is the way you can put code block to the gesture listener parameter of widgets, but the problem will arise when widget has no such parameters. For example, you have an image on app and want to respond whenever user taps on it. Flutter has some widgets to respond to the gestures from users. You simply need to wrap the non-interactive widgets with such gesture detector widgets.

1. GestureDetector( )

GestureDetector() widget helps to detect wide variety of gestures from users. Suppose you need to respond to the user when every they tap on card or any images. Simply wrap such widgets with GestureDetector() and place sets of code-blocks on its gesture listener parameter like an example below:

GestureDetector( 
          child: Card( 
            child: Text("Click on Me"),
          ),

          onTap: (){
              print("Card is tapped.");
          },

          onDoubleTap: ()=> print("Card is double tapped."),

          onLongPress: (){
             print("Card is long pressed.");
          },
)

2. InkResponse()

InkResponse() widgets help to detect some sorts of gestures and it creates splash effects on screen touch. Wrap non-interactive widgets with InkResponse() to make them interactive like below:

InkResponse( 
          child: Card( 
            child: Text("Click on Me"),
          ),

          onTap: (){
              print("Card is tapped.");
          },

          onDoubleTap: ()=> print("Card is double tapped."),

          onLongPress: (){
             print("Card is long pressed.");
          },
 )