Flutter Gestures

Flutter Gestures: Gestures are a very compulsive feature of flutter. They are responsible for interacting with mobile phones or any touch-based device using physical movements or actions.

Gestures in flutter are broadly divided into two categories: Pointers and Gestures.

Let’s study them elaborately further below.

Pointers

The pointers are raw data that are responsible for the user’s interaction with the device’s screen. For example, touches, mice, and style. In flutter, we have four types of pointers:

  1. PointerDownEvent: this event gives access to the pointer to contact the screen at some particular location.
  • PointerMoveEvent: this event gives access to the pointer to move one location on the screen to another.
  • PointerUpEvent: this event gives access to the pointer to stop contacting the screen.
  • PointerCancelEvent: This event's input is sent when the pointer is no longer interacting with the app.

Gestures

The gestures represent the semantic action such as tap, drag, and scale.

Those semantic actions consist of one or more pointer movements. Now let us understand each gesture elaborately.

  1. Tap: it is a gesture in which the user touches the screen on a button or anything for a very short time and then releases the fingertip. The events that are included in Tap are:
  • onTapDown
    • onTapUp
    • onTap
    • onTapCancel
  • Double Tap: a gesture in which the user continuously touches the screen twice in a short time and then releases the fingertip is known as a double-tap gesture. The event included is listed below. 
  • onDoubleTap
  • Long Press: Like the tap feature, when the user touches the screen for a little bit longer and then releases the fingertip, it is called a long-press gesture. We have only one event in this, which is listed below:
  • onLongPress
  • Vertical Drag: a gesture in which we touch the screen and drag our fingertip in the vertical direction before releasing the fingertip is called vertical drag. We have access to four events in vertical drag, which are listed below.
  • onVerticalDragStart
    • onVerticalDragUpdate
    • onVerticalDragEnd
  • Horizontal Drag: Like vertical drag, horizontal drag is responsible for dragging the fingertip in the horizontal direction before releasing the fingertip. There are three events listed in horizontal drag, which are given below.
  • onHorizontalDragStart
    • onHorizontalDragUpdate
    • onHorizontalDragEnd
  • Pan: This is a gesture in which we touch the device's screen with a fingertip and move it in a particular direction without releasing the fingertip. The events included in the pan are listed below.
  • onPanStart
    • onPanUpdate
    • onPanEnd

GestureDetector( )

Flutter gives us access to a special and essential widget responsible for detecting or recognizing a gesture. This widget is GestureDetector( ). It detects various gestures in our flutter application.

We will now understand GestureDetector( ) widget by using an example:

import ‘package:flutter/material.dart';  
 void main() => runApp(MyApp()); 
class MyApp extends StatelessWidget 
{   
// This widget is the root of your application.  
 @override   Widget build(BuildContext context)
 {    
 return MaterialApp(       title: 'My Sample Application',      
 theme: ThemeData(         primarySwatch: Colors.red,       ),     
  home: MyHomePage(),     );  
 } 
}  
 class MyHomePage extends StatefulWidget
 {  
 @override   MyHomePageState createState() => new MyHomePageState();
 }  
 class MyHomePageState extends State<MyHomePage>
 {  
 @override   Widget build(BuildContext context)
 {   
  return new Scaffold(       appBar: new AppBar(         title: new Text('understanding GestureDetector'),         centerTitle: true,       ),      
 body: new Center(           child: GestureDetector(               onTap: () 
{                
 print('gesture happened');             
  },             
  child: Container(                 height: 60.0,                 width: 120.0,                 padding: EdgeInsets.all(10.0),                
 decoration: BoxDecoration(                   color: Colors.pink,                   borderRadius: BorderRadius.circular(15.0),                 ),             
    child: Center(child: Text('Click Here')),      
         ))),   
  ); 
  } 
}  

 The output of this code will be:

Flutter Gestures

Gesture Disambiguation

The literal meaning of disambiguation can be defined as the fact of displaying the dissimilarity between two or more meanings so that the user can understand it clearly. In flutter, gesture disambiguation is firmly attached to the gesture arena.

In case there is more than one gesture recognizer in your code attached to a pointer, the framework disambiguates as to which gesture the user intends, which is when the gesture arena comes into play. The gesture arena decides which gesture is needed by closely following two rules:

  1.  A recognizer can leave the arena by accepting the defeat until only there is only one left.
  • A recognizer can declare victory at any point of time, and then others are automatically losers.

Advanced Gestures

Flutter has many advanced gestures, which grants many new features and accessibility to flutter gestures. Let us now understand these gestures in detail.

  • Dismissible: this gesture is used to dismiss by dragging in the indicated direction.
  • Draggable: this is a widget that can be dragged anywhere on the screen.
  • LongPressDraggable: this widget is responsible for making its child draggable with the help of a long press.
  • DragTarget: it is a widget that receives data when a draggable widget is dropped.
  • IgnorePointer: this widget is responsible for preventing children from receiving pointer events.
  • AbsorbPointer: this widget is responsible for preventing subtree from receiving pointer events.
  • Scrollable: it is a widget that implements a scrolling feature to its child.