Search code examples
fluttergesture-recognition

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


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),
        ),
      ),
    );
  }

Solution

  • 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,
          ),
        );