Small details that build taste in Flutter.

curated by Kamran BekirovKamran Bekirov

Make the whole GestureDetector area tappable

Need a tappable widget without the Material splash? Use GestureDetector instead of InkWell. But be careful: by default, it only takes taps on its child. If the child is a Row with an icon and a text, only the icon and the text are tappable. The padding and the gaps between them do nothing:

Fix it with one line:

GestureDetector(
  behavior: HitTestBehavior.opaque,
  onTap: () {},
  child: ...,
)

behavior has three options:

deferToChild (the default): only the child takes taps, as in the video. A Container takes taps on its whole box only if it has a color.

opaque: the whole box is tappable. Widgets behind it don't get the tap.

translucent: the whole box is tappable, and widgets behind it get the tap too. Two overlapping detectors can both fire.

Make opaque your default. Use translucent only when stacked widgets should both respond.

Kamran Bekirov
Kamran Bekirov

Want this level of care in your Flutter apps?

Work With Me