Question 229891 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – 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),
        ),
      ),
    );
  }
Tags:

2

Answers


  1. 0

    You can call both method inside onDelete in _tappableChip

    onDeleted: () {
   onDeleted?.call();
   onTap?.call();
  }, // you follow this pattern
    Login or Signup to reply.
  2. 0

    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');
  },
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search