CODEWITHSUNDEEP
flutter
Dan Cojocaru
Dan Cojocaru

Reputation: 167

How to skip Flutter Widget in tap detection?

I'm trying to make a modal bottom sheet with ListTiles that contain a Checkbox as the leading widget. However, the Checkbox will receive tap event instead of the ListTile, now showing the ink ripple effect for the tile and making me implement two onTap/onChanged callbacks.

I have tried not implementing the Checkbox's onChanged callback and wrapping it around an AbsorbPointer widget, however in these two cases the ListTile would also not get the tap event.

return ListTile(
  onTap: onTap,
  title: Text("Show expired schedules"),
  leading: Checkbox(value: snapshot.data, onChanged: (_) => onTap()),
);

I would like to somehow make the Checkbox not tappable, but have the ListTile still receive the tap event. Kind of like AbsorbPointer, except skipping one Widget, not absorbing the tap event entirely.

Upvotes: 2

Views: 826

Answers (3)

Kalpesh Khandla
Kalpesh Khandla

Reputation: 746

You can either use IgnorePointer or AbsorbPointer.

  • IgnorePointer

Try with below code snippet

 IgnorePointer(
  child: ElevatedButton(
  onPressed: () {},
  child: Text('Not clickable Button'),
  ),
  );
  • AbsorbPointer

Try with below code snippet

AbsorbPointer(
child: ElevatedButton(
onPressed: () {},
child: Text('Not clickable Button'),
),
);

Upvotes: 0

CopsOnRoad
CopsOnRoad

Reputation: 267544

You can do that using AbsorbPointer too

return ListTile(
  onTap: onTap,
  title: Text("Show expired schedules"),
  leading: AbsorbPointer(
    absorbing: _condition, // bool value, true makes it absorb touch event on CheckBox still making ListTile tappable. 
    child: Checkbox(value: snapshot.data, onChanged: (_) => onTap()),
  ),
);

Upvotes: 0

diegoveloper
diegoveloper

Reputation: 103421

Wrap your Checkbox widget inside IgnorePointer widget and it should work:

return ListTile(
  onTap: onTap,
  title: Text("Show expired schedules"),
  leading: IgnorePointer(child: Checkbox(value: snapshot.data, onChanged: (_) => onTap())),
);

Upvotes: 5

Related Questions