Basic Widgets/GestureDetector

The GestureDetector widget is the primary way to handle user interactions in Flitter. It wraps a child widget and detects various gestures and mouse events.

Supported Gestures

Click Gesture

onClick: Handles click events

GestureDetector({
  onClick: () => console.log("Clicked"),
  child: /* widget */
})

Mouse Events

onMouseDown: When mouse button is pressed
onMouseMove: When mouse is moved
onMouseUp: When mouse button is released
onMouseOver: When mouse is over the widget
onMouseEnter: When mouse enters the widget
onMouseLeave: When mouse leaves the widget

GestureDetector({
  onMouseDown: (e) => console.log("Mouse down", e),
  onMouseMove: (e) => console.log("Mouse move", e),
  onMouseUp: (e) => console.log("Mouse up", e),
  onMouseEnter: (e) => console.log("Mouse enter", e),
  onMouseLeave: (e) => console.log("Mouse leave", e),
  child: /* widget */
})

Drag Gestures

onDragStart: When drag begins
onDragMove: During drag
onDragEnd: When drag ends

GestureDetector({
  onDragStart: (e) => console.log("Drag start", e),
  onDragMove: (e) => console.log("Dragging", e),
  onDragEnd: (e) => console.log("Drag end", e),
  child: /* widget */
})

Wheel Event

onWheel: Mouse wheel scroll

GestureDetector({
  onWheel: (e) => console.log("Wheel event", e),
  child: /* widget */
})

Available Props

onClick: (event: MouseEvent) => void
onMouseDown: (event: MouseEvent) => void
onMouseMove: (event: MouseEvent) => void
onMouseUp: (event: MouseEvent) => void
onMouseOver: (event: MouseEvent) => void
onMouseEnter: (event: MouseEvent) => void
onMouseLeave: (event: MouseEvent) => void
onDragStart: (event: MouseEvent) => void
onDragMove: (event: MouseEvent) => void
onDragEnd: (event: MouseEvent) => void
onWheel: (event: WheelEvent) => void
cursor: Mouse cursor style of Cursor type

Cursor Types

Use the cursor prop to set the mouse cursor when hovering over the widget:

“pointer”
“default”
“move”
“text”
“wait”
“help”
“progress”
“not-allowed”
“crosshair”
“grab”
“grabbing”
And more…

Example:

GestureDetector({
  cursor: "pointer",
  child: /* widget */
})

Common Use Cases

Interactive Button

GestureDetector({
  onClick: handleClick,
  child: CustomButton(),
});

Draggable Item

GestureDetector({
  onDragStart: handleDragStart,
  onDragMove: handleDragMove,
  onDragEnd: handleDragEnd,
  child: DraggableItem(),
});

Mouse Interaction

GestureDetector({
  onMouseEnter: handleMouseEnter,
  onMouseLeave: handleMouseLeave,
  child: HoverableWidget(),
});

Best Practices

State Management

Use StatefulWidget and setState for state management
Minimize state changes to avoid unnecessary re-renders

Event Handling

Use appropriate event handlers for different interactions
Use event.stopPropagation() when needed to prevent event bubbling

Performance

Avoid heavy computations in event handlers
Use requestAnimationFrame for performance optimization when needed

Tips and Tricks

Custom Cursors

Use the cursor prop to provide visual feedback to users

Event Propagation

Control event bubbling using event.stopPropagation() and event.preventDefault()

Debugging

Use console.log in event handlers to inspect event data

GestureDetector Widget