GestureDetector on tap is not triggring on alll the screen - flutter

Question

i am learning flutter and i just created an app that will update a counter variable when the user clicks on any part of the screen except the AppBar. However, the GestureDetector does not detect any clicks on the4 screen except for those on the text itself
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(
appBar: AppBar(
title: const Text("i am a title"),
backgroundColor: Colors.teal,
leading: const Icon(
Icons.home,
color: Colors.white,
),
),
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: const [
Expanded(
child: Clicks(),
),
],
),
),
),
);
}
}
class Clicks extends StatefulWidget {
const Clicks({super.key});
#override
State<Clicks> createState() => _ClicksState();
}
class _ClicksState extends State<Clicks> {
int count = 0;
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => setState(
() {
count++;
},
),
child: Center(
child: Text("total number of clicking on scren is $count "),
),
);
}
}

Answer 1

The GestureDetector will detect any gestures for it's child - in this case the Text widget.
If you want to detect everything, wrap the entrie Scaffold with a GestureDector.
In this case, you'll have to refactor your code:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Clicks();
}
}
class Clicks extends StatefulWidget {
const Clicks({super.key});
#override
State<Clicks> createState() => _ClicksState();
}
class _ClicksState extends State<Clicks> {
int count = 0;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("i am a title"),
backgroundColor: Colors.teal,
leading: const Icon(
Icons.home,
color: Colors.white,
),
),
body: GestureDetector(
onTap: () {
setState(() {
count++;
});
},
child: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Text("clicked a total of $count times"),
),
],
),
),
),
),
);
}
}

Answer 2

Try with below changes :
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () => setState(
() {
count++;
},
),
child: Center(
child: Text("total number of clicking on scren is $count "),
),
);