GestureDetector in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to detect a tap gesture on the container.

Flutter

GestureDetector(
  onTap: () {
    print('Container tapped');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue[1],
  ),
)

Drag options to blanks, or click blank then click option'

A.withOpacity(0.5)

B.shade100

C.shade500

D.shade900

Attempts:

3 left

💡 Hint

Common Mistakes

Using color shades like .shade100 which are not valid on Colors.blue directly.

Leaving the color without any modification which might not show the effect clearly.

The withOpacity method changes the transparency of the color, making the blue container visible with some transparency.

2fill in blank

medium

Complete the code to detect a double tap gesture and print a message.

Flutter

GestureDetector(
  [1]: () {
    print('Double tapped');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
)

Drag options to blanks, or click blank then click option'

AonTap

BonLongPress

ConPanUpdate

DonDoubleTap

Attempts:

3 left

💡 Hint

Common Mistakes

Using onTap which only detects single taps.

Using onLongPress which detects long presses, not double taps.

The onDoubleTap callback detects when the user taps twice quickly on the widget.

3fill in blank

hard

Fix the error in the GestureDetector code to detect a vertical drag update.

Flutter

GestureDetector(
  onPanUpdate: (details) {
    if (details.delta.dy [1] 0) {
      print('Dragging down');
    }
  },
  child: Container(
    width: 150,
    height: 150,
    color: Colors.green,
  ),
)

Drag options to blanks, or click blank then click option'

A<

B>

C==

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' which detects upward drag instead of downward.

Using '==' which only detects zero movement.

The details.delta.dy is positive when dragging down, so the condition should check if it is greater than zero.

4fill in blank

hard

Fill both blanks to detect a long press and change the container color.

Flutter

GestureDetector(
  [1]: () {
    setState(() {
      color = Colors.[2];
    });
  },
  child: Container(
    width: 120,
    height: 120,
    color: color,
  ),
)

Drag options to blanks, or click blank then click option'

AonLongPress

BonTap

Cred

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using onTap instead of onLongPress.

Using a color name not defined in Flutter's Colors class.

onLongPress detects a long press gesture. Changing color to Colors.red updates the container color.

5fill in blank

hard

Fill all three blanks to detect horizontal drag start and print the position.

Flutter

GestureDetector(
  [1]: (details) {
    print('Drag started at: ' + details.[2].toString());
  },
  child: Container(
    width: 200,
    height: 100,
    color: Colors.orange,
  ),
  behavior: [3],
)

Drag options to blanks, or click blank then click option'

AonHorizontalDragStart

BglobalPosition

CHitTestBehavior.opaque

DonVerticalDragStart

Attempts:

3 left

💡 Hint

Common Mistakes

Using onVerticalDragStart instead of horizontal.

Using localPosition instead of globalPosition if global is needed.

Not setting behavior, causing taps to be missed on transparent areas.

onHorizontalDragStart detects the start of a horizontal drag. globalPosition gives the drag start position. HitTestBehavior.opaque ensures the GestureDetector catches taps even on transparent areas.