Thursday, September 20, 2018

Flutter Gesture handling


Gestures include tab, dragging, scaling. Gesture handling has two layers, first one is raw pointer event infos. Second layer is the actual gesture, which describe the semantic actions that consists of one or more pointer events.

Pointers represent raw data about the user’s interaction with the device’s screen. There are four types of pointer events:

    PointerDownEvent The pointer has contacted the screen at a particular location.
    PointerMoveEvent The pointer has moved from one location on the screen to another.
    PointerUpEvent The pointer has stopped contacting the screen.
    PointerCancelEvent Input from this pointer is no longer directed towards this app.


Gestures

Gestures represent semantic actions (e.g., tap, drag, and scale) that are recognized from multiple individual pointer events, potentially even multiple individual pointers. Gestures can dispatch multiple events, corresponding to the lifecycle of the gesture (e.g., drag start, drag update, and drag end):

    Tap
        onTapDown A pointer that might cause a tap has contacted the screen at a particular location.
        onTapUp A pointer that will trigger a tap has stopped contacting the screen at a particular location.
        onTap A tap has occurred.
        onTapCancel The pointer that previously triggered the onTapDown will not end up causing a tap.
    Double tap
        onDoubleTap The user has tapped the screen at the same location twice in quick succession.
    Long press
        onLongPress A pointer has remained in contact with the screen at the same location for a long period of time.
    Vertical drag
        onVerticalDragStart A pointer has contacted the screen and might begin to move vertically.
        onVerticalDragUpdate A pointer that is in contact with the screen and moving vertically has moved in the vertical direction.
        onVerticalDragEnd A pointer that was previously in contact with the screen and moving vertically is no longer in contact with the screen and was moving at a specific velocity when it stopped contacting the screen.
    Horizontal drag
        onHorizontalDragStart A pointer has contacted the screen and might begin to move horizontally.
        onHorizontalDragUpdate A pointer that is in contact with the screen and moving horizontally has moved in the horizontal direction.
        onHorizontalDragEnd A pointer that was previously in contact with the screen and moving horizontally is no longer in contact with the screen and was moving at a specific velocity when it stopped contacting the screen.

To listen to gestures from the widgets layer, use a GestureDetector.

class MyButton extends StatelessWidget {
@override
Widget build(BuildContext context){
    return GestureDetector(
        onTap:(){
            print("Button tapped");
        },
        child:Container {
            height:36.0,
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.symmetric(horizontal:8.0)
'            decoration: BoxDecoration(
                borderRadius : BorderRadius.circular(5.0),
                color : Colors.lightGreen[500],
               
            )
        }
       
    )
}
}


References
https://flutter.io/gestures/

No comments:

Post a Comment