Flutter Gesture & Interaction Widgets #

Purpose: Enable user interaction through taps, swipes, drags, long presses, and custom gestures. These widgets detect gestures and allow interactive UI behavior.

---

1. GestureDetector #

Detects various gestures such as tap, double-tap, long press, drag, and more.

GestureDetector(
  onTap: () => print("Tapped"),
  onLongPress: () => print("Long Pressed"),
  child: Container(
    padding: EdgeInsets.all(20),
    color: Colors.blue,
    child: Text("Tap Me"),
  ),
);

Use case: Custom interaction behavior on any widget.

---

2. InkWell #

A Material ripple-effect widget for taps.

InkWell(
  onTap: () => print("Clicked"),
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text("Button with Ripple"),
  ),
);

Use case: Buttons, clickable cards, interactive lists.

---

3. InkResponse #

An advanced version of InkWell with more control over ripple behavior.

InkResponse(
  onTap: () => print("Tapped"),
  radius: 30,
  child: Icon(Icons.favorite),
);

Use case: Custom circular ripples, controlling splash radius.

---

4. Dismissible #

Allows a widget to be swiped away (commonly used for deleting list items).

Dismissible(
  key: UniqueKey(),
  onDismissed: (_) => print("Item removed"),
  child: ListTile(title: Text("Swipe to delete")),
);

Use case: Swipable list rows like email apps.

---

5. Draggable #

Makes a widget draggable on the screen.

Draggable(
  data: "item",
  feedback: Material(child: Text("Dragging")),
  child: Text("Drag Me"),
);

Use case: Drag-and-drop UI, game elements.

---

6. DragTarget #

Receives draggables dropped onto it.

DragTarget(
  onAccept: (data) => print(data),
  builder: (_, __, ___) => Container(
    height: 100, width: 100, color: Colors.green,
  ),
);

Use case: Building drag-and-drop systems.

---

7. LongPressDraggable #

Begins drag only after a long press on the widget.

LongPressDraggable(
  data: "item",
  feedback: Text("Dragging"),
  child: Text("Long Press to Drag"),
);

Use case: Prevent accidental draggable activation.

---

8. MouseRegion (Web/Desktop) #

Detects mouse hover, enter, exit events.

MouseRegion(
  onEnter: (_) => print("Mouse entered"),
  child: Text("Hover Area"),
);

Use case: Web hover effects, cursor changes.

---

9. Listener #

Low-level pointer event detector.

Listener(
  onPointerDown: (_) => print("Pointer down"),
  child: Text("Pointer Listener"),
);

Use case: Advanced gesture control not covered by GestureDetector.

---

10. AbsorbPointer #

Prevents child widgets from receiving gestures.

AbsorbPointer(
  absorbing: true,
  child: ElevatedButton(onPressed: () {}, child: Text("Disabled")),
);

Use case: Disable UI sections without changing appearance.

---

11. IgnorePointer #

Similar to AbsorbPointer, but lets touches pass through to widgets behind it.

IgnorePointer(
  child: Container(color: Colors.transparent),
);

Use case: Creating overlays that don’t block interaction.

---

12. Focus & FocusNode #

Manage keyboard or hardware key interaction.

Focus(
  onKey: (_, event) {
    print(event.logicalKey);
    return KeyEventResult.handled;
  },
  child: TextField(),
);

Use case: Keyboard shortcuts, desktop apps.

---

✔ Summary #

Gesture & Interaction widgets provide:

• Tap, drag, swipe actions
• Ripple effects
• Drag & drop support
• Hover/mouse detection (web/desktop)
• Pointer-level event control
• UI blocking/ignoring gestures

These widgets allow you to create highly interactive, user-friendly interfaces.

---

Would you like the next section: