GestureDetector in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Tap Gesture Detection Output

What will be the output when the user taps the blue container in this Flutter app?

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: GestureDetector(
            onTap: () {
              print('Container tapped');
            },
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

A Nothing visible changes on screen, but 'Container tapped' is printed in the console.

B The app crashes with a runtime error.

C The blue container changes color to red when tapped.

D A popup dialog appears saying 'Container tapped'.

💡 Hint

Check what the onTap callback does in the GestureDetector.

The GestureDetector listens for taps and runs the onTap callback. Here, it prints a message to the console but does not change the UI.

❓ lifecycle

intermediate

GestureDetector onLongPress Behavior

What happens when the user presses and holds the green container for 2 seconds in this Flutter app?

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String message = 'Hold the box';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: GestureDetector(
            onLongPress: () {
              setState(() {
                message = 'Long pressed!';
              });
            },
            child: Container(
              width: 150,
              height: 150,
              color: Colors.green,
              alignment: Alignment.center,
              child: Text(message, style: const TextStyle(color: Colors.white)),
            ),
          ),
        ),
      ),
    );
  }
}

A Nothing happens because onLongPress is not a valid GestureDetector callback.

B The text inside the green box changes to 'Long pressed!' after holding for 2 seconds.

C The app throws a setState error because message is not mutable.

D The green box disappears from the screen.

💡 Hint

onLongPress triggers when the user presses and holds the widget.

The onLongPress callback updates the state variable message, which rebuilds the widget showing new text.

❓ navigation

advanced

GestureDetector and Navigation Behavior

What happens when the user taps the red container in this Flutter app?

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: GestureDetector(
            onTap: () {
              Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => const SecondScreen(),
              ));
            },
            child: Container(
              width: 120,
              height: 120,
              color: Colors.red,
              alignment: Alignment.center,
              child: const Text('Tap me', style: TextStyle(color: Colors.white)),
            ),
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: const Center(child: Text('Welcome to the second screen!')),
    );
  }
}

A The app navigates to a new screen showing 'Welcome to the second screen!'.

B Nothing happens because Navigator.of(context) cannot be used inside GestureDetector.

C The app crashes with a runtime error about context.

D The red container changes color to blue.

💡 Hint

Navigator.of(context).push opens a new screen on tap.

The onTap callback uses Navigator to push a new route, showing the second screen with the welcome message.

📝 Syntax

advanced

GestureDetector Syntax Error Identification

Which option contains a syntax error that will prevent the Flutter app from compiling?

Flutter

GestureDetector(
  onTap: () {
    print('Tapped');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.yellow,
  ),
)

A GestureDetector(onTap: () { print('Tapped'); }, child: Container(width: 100, height: 100, color: Colors.yellow))

B ))wolley.sroloC :roloc ,001 :thgieh ,001 :htdiw(reniatnoC :dlihc ,} ;)'deppaT'(tnirp { )( :paTno(rotceteDerutseG

C GestureDetector(onTap: () => print('Tapped'), child: Container(width: 100, height: 100, color: Colors.yellow))

D GestureDetector(onTap: () { print('Tapped') child: Container(width: 100, height: 100, color: Colors.yellow))

💡 Hint

Look for missing punctuation or brackets.

Option D is missing a comma between the onTap callback and the child property, causing a syntax error.

🔧 Debug

expert

Why does GestureDetector not detect taps?

Given this Flutter code, why does tapping the container not trigger the onTap callback?

Flutter

GestureDetector(
  onTap: () {
    print('Tapped');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.transparent,
  ),
)

A Because GestureDetector only works with visible widgets that have text.

B Because onTap requires the container to have a GestureRecognizer explicitly attached.

C Because the container's color is transparent, it does not receive pointer events, so GestureDetector doesn't detect taps.

D Because the onTap callback must be async to work properly.

💡 Hint

Try changing the container's color to a non-transparent color.

A transparent container does not block pointer events, so GestureDetector cannot detect taps on it. Giving it a color with opacity > 0 fixes this.