How to make a Chip that handle both onDeleted and tap on it to trigger extra action

Question

How to make a Chip to support a tap to trigger an action in addition to the onDeleted?

In my code, adding a gesture handler hides onDeleted tap triggering:


 /// A tappable chip
  Widget _tappableChip({
    /// The chip label
    required String label,

    /// Potential badge
    int? badge,

    /// The function to run when a tap occures
    void Function()? onTap,

    /// The function to remove the filter
    void Function()? onDeleted,
  }) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(0, 0, 5, 0),
      child: GestureDetector(
        onTap: onTap,
        child: Chip(
          onDeleted: onDeleted,
          label: Text(label),
          avatar: badge == null ? null : Badge.count(count: badge),
        ),
      ),
    );
  }

score 1 · Answer 1 · answered Aug 14 '23 at 10:04

1

You can call both method inside onDelete in _tappableChip

onDeleted: () {
   onDeleted?.call();
   onTap?.call();
  }, // you follow this pattern

answered Aug 14 '23 at 10:04

Md. Yeasin Sheikh

54,221
7
29
56

Those two trigger different action, and onDeleted only responds to tap on the cross widget which sits on the right side of the chip (if it were triggered) – Stéphane de Luca Aug 14 '23 at 11:25
I think I am not getting properly, can you elaborate what do you mean by *onDeleted and tap on it to trigger extra action* – Md. Yeasin Sheikh Aug 14 '23 at 11:45

score 1 · Answer 2 · answered Aug 14 '23 at 11:25

here i have done some changes in your tappableChip widget

-

Widget _tappableChip({
  required String label,
  int? badge,
  void Function()? onTap,
  void Function()? onDeleted,
}) {
  return Padding(
    padding: const EdgeInsets.fromLTRB(0, 0, 5, 0),
    child: Chip(
      onDeleted: onDeleted,
      label: GestureDetector(
        onTap: onTap, // Handle tap action here
        child: Text(label),
      ),
      avatar: badge == null ? null : Badge.count(count: badge),
    ),
  );
}

and now you can use tappableChip funcation like this -

_tappableChip(
  label: 'Example Chip',
  badge: 3,
  onTap: () {
    // Handle tap action here
    print('Chip tapped');
  },
  onDeleted: () {
    // Handle delete action here
    print('Chip deleted');
  },
),

score 0 · Answer 3 · answered Aug 15 '23 at 09:22

After analysing the Chip.dart library, I came up with a simple solution.

In my build() I use the RawChipwidget instead of the extended Chip class and set the tapEnabled to true as follows:

    return Padding(
      padding: const EdgeInsets.fromLTRB(0, 0, 5, 0),
      child: RawChip(
        onDeleted: onDeleted,
        label: Text(label),
        avatar: badge == null ? null : Badge.count(count: badge),
        tapEnabled: true,
        onPressed: onTap,
      ),
    );

How to make a Chip that handle both onDeleted and tap on it to trigger extra action

3 Answers3