Skip to main content

​
GestureDetector

The GestureDetector widget in Stac allows you to detect various gestures and user interactions within your application. It wraps Flutter’s native GestureDetector widget, providing a JSON-based interface to handle touch events, taps, drags, and more.

​
Usage

To use a GestureDetector in your Stac JSON, specify the widget type as “gestureDetector” and provide a child widget along with any gesture callbacks you want to handle. 
{
  "type": "gestureDetector",
  "child": {
    "type": "container",
    "color": "#2196F3",
    "width": 200,
    "height": 200,
    "alignment": "center",
    "child": {
      "type": "text",
      "data": "Tap me!",
      "style": {
        "color": "#FFFFFF",
        "fontSize": 20
      }
    }
  },
  "onTap": {
    "actionType": "showSnackBar",
    "content": {
      "type": "text",
      "data": "This is a Snackbar"
    }
  }
}

​
Properties

​
Child Widget

PropertyTypeDescription
childWidgetThe widget that will respond to gestures

​
Tap Gestures

PropertyTypeDescription
onTapDownActionCalled when a pointer contacts the screen
onTapUpActionCalled when a pointer stops contacting the screen
onTapActionCalled when a tap occurs
onTapCancelActionCalled when the tap is canceled
onDoubleTapDownActionCalled when a pointer contacts the screen in a potential double tap
onDoubleTapActionCalled when a double tap occurs
onDoubleTapCancelActionCalled when the double tap is canceled

​
Secondary and Tertiary Tap Gestures

PropertyTypeDescription
onSecondaryTapActionCalled when a secondary tap occurs (e.g., right-click)
onSecondaryTapDownActionCalled when a secondary pointer contacts the screen
onSecondaryTapUpActionCalled when a secondary pointer stops contacting the screen
onSecondaryTapCancelActionCalled when the secondary tap is canceled
onTertiaryTapDownActionCalled when a tertiary pointer contacts the screen
onTertiaryTapUpActionCalled when a tertiary pointer stops contacting the screen
onTertiaryTapCancelActionCalled when the tertiary tap is canceled

​
Long Press Gestures

PropertyTypeDescription
onLongPressDownActionCalled when a pointer contacts the screen in a potential long press
onLongPressCancelActionCalled when the long press is canceled
onLongPressActionCalled when a long press occurs
onLongPressStartActionCalled when a long press starts
onLongPressMoveUpdateActionCalled when a long press move update occurs
onLongPressUpActionCalled when a long press up occurs
onLongPressEndActionCalled when a long press ends

​
Secondary and Tertiary Long Press Gestures

PropertyTypeDescription
onSecondaryLongPressDownActionCalled when a secondary pointer contacts the screen in a potential long press
onSecondaryLongPressCancelActionCalled when the secondary long press is canceled
onSecondaryLongPressActionCalled when a secondary long press occurs
onSecondaryLongPressStartActionCalled when a secondary long press starts
onSecondaryLongPressMoveUpdateActionCalled when a secondary long press move update occurs
onSecondaryLongPressUpActionCalled when a secondary long press up occurs
onSecondaryLongPressEndActionCalled when a secondary long press ends
onTertiaryLongPressDownActionCalled when a tertiary pointer contacts the screen in a potential long press
onTertiaryLongPressCancelActionCalled when the tertiary long press is canceled
onTertiaryLongPressActionCalled when a tertiary long press occurs
onTertiaryLongPressStartActionCalled when a tertiary long press starts
onTertiaryLongPressMoveUpdateActionCalled when a tertiary long press move update occurs
onTertiaryLongPressUpActionCalled when a tertiary long press up occurs
onTertiaryLongPressEndActionCalled when a tertiary long press ends

​
Drag Gestures

PropertyTypeDescription
onVerticalDragDownActionCalled when a pointer contacts the screen and might begin a vertical drag
onVerticalDragStartActionCalled when a pointer starts a vertical drag
onVerticalDragUpdateActionCalled when a pointer updates a vertical drag
onVerticalDragEndActionCalled when a pointer ends a vertical drag
onVerticalDragCancelActionCalled when the vertical drag is canceled
onHorizontalDragDownActionCalled when a pointer contacts the screen and might begin a horizontal drag
onHorizontalDragStartActionCalled when a pointer starts a horizontal drag
onHorizontalDragUpdateActionCalled when a pointer updates a horizontal drag
onHorizontalDragEndActionCalled when a pointer ends a horizontal drag
onHorizontalDragCancelActionCalled when the horizontal drag is canceled

​
Force Press Gestures

PropertyTypeDescription
onForcePressStartActionCalled when a force press starts
onForcePressPeakActionCalled when a force press reaches its peak force
onForcePressUpdateActionCalled when a force press updates
onForcePressEndActionCalled when a force press ends

​
Other Properties

PropertyTypeDefaultDescription
excludeFromSemanticsbooleanfalseWhether to exclude the gestures from the semantics tree
dragStartBehaviorstring”start”Determines when a drag formally starts (“start” or “down”)

​
Examples

​
Simple Tap Example

{
  "type": "gestureDetector",
  "onTap": {
    "actionType": "navigate",
    "routeName": "/details"
  },
  "child": {
    "type": "container",
    "padding": 16,
    "color": "#E0E0E0",
    "child": {
      "type": "text",
      "data": "Navigate to Details"
    }
  }
}

​
Drag Example

{
  "type": "gestureDetector",
  "onHorizontalDragEnd": {
    "actionType": "handleSwipe"
  },
  "child": {
    "type": "container",
    "width": 200,
    "height": 200,
    "color": "#F5F5F5",
    "alignment": "center",
    "child": {
      "type": "text",
      "data": "Swipe horizontally"
    }
  }
}

​
Long Press Example

{
  "type": "gestureDetector",
  "onLongPress": {
    "actionType": "showDialog",
    "title": "Long Press Detected",
    "content": "You performed a long press on the widget."
  },
  "child": {
    "type": "container",
    "padding": 16,
    "decoration": {
      "color": "#4CAF50",
      "borderRadius": 8
    },
    "child": {
      "type": "text",
      "data": "Long press me",
      "style": {
        "color": "#FFFFFF"
      }
    }
  }
}

​
Action Handling

Each gesture callback in Stac GestureDetector accepts an action object that defines what should happen when the gesture is detected. This can be a navigation action, showing a dialog, executing a custom function, or any other action supported by your Stac application. For more information on actions, see the Actions documentation.
⌘I