hit_slop 1.0.0

HitSlop increases the hit box of widgets without affecting the surrounding layout.

Hit Slop

HitSlop increases the hitbox of a widget without affecting the layout of any other widgets in the tree.

HitSlop(
  slop: const EdgeInsets.all(8),
  onTap: () {
    print('hit box tapped');
  }
  child: const Icon(
    Icons.add,
    color: Colors.black,
    size: 24,
  ),
)

Installation

flutter pub add hit_slop

Usage

Unlike other approaches like using a Padding widget, HitSlop won't change the layout of surrounding widgets and doesn't require you to wrap your widgets in a Stack:

[Basic demo].

[Basic demo 2].

Row(
  children: [
    const Text('Tap the icon'),
    HitSlopBuilder(
      slop: const EdgeInsets.all(8),
      builder: (context, hitBox) => GestureDetector(
        onTap: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
              content: Text('Pressed'),
              behavior: SnackBarBehavior.floating,
            ),
          );
        },
        child: Container(
          color: Colors.green.withOpacity(0.2),
          child: hitBox,
        ),
      ),
      child: const Icon(
        Icons.add,
        color: Colors.black,
        size: 24,
      ),
    ),
  ],
);

It achieves this by using an OverlayEntry to float the hitbox on top of the underyling widget.