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
:
.
.
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.