Handling Gestures

Relax. We'll talk through this in plain words — no textbook voice.

If you want user interaction on widgets that aren't buttons — like Container, Image, Card, or Icon — you can wrap them with GestureDetector. It's commonly used for things like tapping a product card to go to its detail page, or double-tapping an image to mark it as a favorite.

dart

GestureDetector(
  onTap: () {
    print('Card tapped');
  },
  onLongPress: () {
    print('Card long pressed');
  },
  child: Container(
    width: 180,
    padding: const EdgeInsets.all(18),
    decoration: BoxDecoration(
      color: Colors.green,
      borderRadius: BorderRadius.circular(14),
    ),
    child: const Center(
      child: Text('Tap this card'),
    ),
  ),
)

You should see

A green card appears, and tapping or long-pressing it prints a message to the console.

Next Steps

Next, learn about TextField and form input, where users can type in text.

Easy traps

If you put a GestureDetector without a child, there's no area to tap. Make sure to include a child widget.