Tapping the White Space of the GestureDetector Widget’s Child
Developing an app with a clean UI makes it easier for users to interact with the application. Managing white space is one of the essential keys to achieving this clean design. Although white space is technically empty, it still can serve a functional purpose. In this article, I’ll show you how to make the white space within a GestureDetector
widget in Flutter interactable.
Unresponsive White Space
I recently implemented a menu design using the GestureDetector
widget in Flutter. Although the menu label and icon responded to taps as expected, tapping the white space did not trigger any action.
Here, I will show how I solved that issue. It is a simple solution that is already provided by Flutter. Let’s make a simple UI that is similar to that issue.
We will create an account menu. When we tap it, it will respond by displaying a message on the snack bar.
Here is the code
GestureDetector(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Account')),
);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Padding(
padding: EdgeInsets.all(8),
child: Icon(Icons.person),
),
Text(
'Account',
style: Theme.of(context).textTheme.bodyLarge,
),
],
),
)
Let’s run the code above. We will see that nothing happens when we tap the white space between the icon and the account label.
Understanding HitTestBehavior
Before diving into the reason why it happened and what’s the solution, let’s understand what HitTestBehavior
is. It's an enumeration class that helps the GestureDetector
widget to determine how to respond during hit testing. Hit testing is the process used to determine what UI elements are located at a specific position on the screen.
Types of HitTestBehavior
deferToChild
This is the default behavior. It means that the child of the
GestureDetector
widget is the one who decides whether to react to the tap or not.
behavior: HitTestBehavior.deferToChild,
translucent
The
GestureDetector
will respond to events within its bounds but also allows targets visually behind it to receive events. This is particularly useful when you have overlapping elements.
behavior: HitTestBehavior.translucent,
opaque
The
GestureDetector
consumes the event and preventing any visually behind elements from receiving it.
behavior: HitTestBehavior.opaque
Solution
After understanding HitTestBehavior
, we know the reason why tapping the white space did not trigger any action. It is because the behavior in GestureDetector
is HitTestBehavior.deferToChild
.
So, to solve it, we must set the behavior
property of the GestureDetector
to either HitTestBehavior.translucent
or HitTestBehavior.opaque
.
GestureDetector(
behavior: HitTestBehavior.translucent, // or HitTestBehavior.opaque
Let’s run the code above that we already fixed.
Conclusion
Using the right HitTestBehavior
can make your Flutter app more intuitive and user-friendly by making effective use of white space.