Question 77982 in Flutter Question posted in
The official Flutter documentation can be found here.

GestureDetector on tap is not triggring on alll the screen – Flutter

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 "),
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    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"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    Try with below changes :

    GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTap: () => setState(
    () {
      count++;
    },
  ),
  child: Center(
    child: Text("total number of clicking on scren is $count "),
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search