Increase tap detection area of a widget?

Question

I was wondering if it is possible to increase the "tap area" of a specific widget?

A small example would be a 50 by 50 button. If a user taps anywhere on those 50 by 50 pixels the button's onPressed would be executed. However can I make it so that if a user clicks lets say 5 pixels above the button, its onPressed would still be executed?

I just want to increase this area to provide a better user experience without having to increase the actual size of the button which would make the UI worse.

Answer 1

I'm a bit late to this, however you kinda got 2 options.

The answers before me are very basic and only use basic containers which wont help you.

1) Use behavior: HitTestBehavior.translucent on your gestureDetector, this will allow invisible things to be tapped. However you want more than the area you set to be tappable so go to option 2.

2) Use an invisible Stack. Stack a container above your button, make it invisible, add gesture detection on it, with the correct HitTestBehaviour, and this should work fine. If your button is 50x50, make the container 55x55 and stack them on top of eachother, and problem solved.

Answer 2

You can wrap your RaisedButton into a Container and add some padding to the Container. Then you can wrap the Container into a GestureDetector, which enables multiple clicks events to a widget.

The GestureDetector has also a onTap callback which you can use to execute the same code as when the real RaisedButton has been clicked.

Here is a simple code example:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Stackoverflow example'),
      ),

      body: Center(
        child: GestureDetector(
          child: Container(
            width: 120,
            height: 80,            

            padding: EdgeInsets.all(10),

            color: Colors.blueAccent,

            child: Center(
              child: RaisedButton(                
                child: Text('Click me'),
                onPressed: _fireButtonClick,
              ),
            )         
          ),
          onTap: _fireButtonClick
        ),
      ),
    );
  }

Now extract your RaisedButton onPressed code into a dedicated function which you can assign to both the RaisedButton onPressed and GestureDetector onTap callbacks:

void _fireButtonClick() {
  print('button clicked');
}

Hope this helps, Doobie