Flutter Card widget onTap() to open Slidable

Question

I have a Slidable widget with a Card child and was wondering is it possible for me to open the Slidable when I tapped on the Card? I have tried using SlidableController but this class seems buggy as it keeps returning null for me. Besides, I also tried using the groupTag property in Slidable but it also not working on my project. The below is the sample code and hoping if anyone could help:

Slidable(
  endActionPane: ActionPane(motion: const DrawerMotion(), children: [
    Expanded(
        child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                    topRight: smallCircularRadius,
                    bottomRight: smallCircularRadius),
                gradient: customColors.progressBarGradient),
            child: ContactOptions(
                contact: data.getContact(), email: data.email)))
  ]),
  child: CustomCard(
      onTap: () {
        Slidable.of(context)!.openEndActionPane();
      },
      child: ListTile(
          dense: true,
          leading: Icon(Icons.supervised_user_circle, size: 50),
          title:
              Text('KOO KIAN KEAT'),
          subtitle: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('----',
                    style: customTextStyles.bodySmall)
              ]))))

Answer 1

Please replace your child to below code

Slidable(
     endActionPane: ActionPane(motion: const DrawerMotion(), 
     children: [
      Expanded(
        child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                    topRight: smallCircularRadius,
                    bottomRight: smallCircularRadius),
                gradient: customColors.progressBarGradient),
            child: ContactOptions(
                contact: data.getContact(), email: data.email)))
  ]),
  child: CardWidget()
) 


 class CardWidget extends StatelessWidget {
    const CardWidget({
        Key? key,
      }) : super(key: key);
    
  final Color color;
  final String text;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Slidable.of(context)!.openEndActionPane();
      },
      child: Card(
        margin: EdgeInsets.zero,
        elevation: 0,
        child: ListTile(
          onTap: () {
            Slidable.of(context)!.openEndActionPane();
          },
          leading: Icon(Icons.supervised_user_circle, size: 50),
          title: Text('KOO KIAN KEAT'),
          subtitle: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [Text('----')],
          ),
        ),
      ),
    );
  }
}

Answer 2

Following the documentation:

You can do something like

final controller = SlidableController();

// Open the actions
void _handleOpen() {
  controller.openEndActionPane();
  // OR
  //controller.openStartActionPane();
}

// ...

child: Slidable(
    controller: controller,
    endActionPane: ActionPane(
      motion: const DrawerMotion(),
      ...
))

So, put your card inside a Inkwell widget

child: InkWell(
  onTap: _handleOpen,
  child: const Card(
    margin: EdgeInsets.zero,
    elevation: 0,
    child: ListTile(
      dense: true,
      leading: Icon(Icons.supervised_user_circle, size: 50),
      title: Text('KOO KIAN KEAT'),
      subtitle: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [Text('----')],
      ),
    ),
  ),
),